All Css Method For Show/hide Divs

October 26, 2023 Post a Comment

I am setting up a FAQ page. On the page I have a div, of class=”faq_container”, with 6 child divs arranged in a 3×3 grid that contain the faq questions. So basically I have 6

Solution 1:

While you've accepted a JavaScript solution, there are (at least) two ways that this can be achieved with CSS alone, the first using CSS :target pseudo-classes, and the second using input, and label, elements.

The first, assuming HTML similar to the following:

<divid="faq_container"><ol><liid="faq1"><h2><ahref="#faq1">Question 1</a></h2><div><p>Text, relating to question one.</p><aclass="close"href="#hide">close</a><!-- the above link doesn't link to anything, just changes the hash whcih stops the ':target' pseudo-class matching the the current 'div' element --></div></li><!-- subsequent elements follow the above structure, stripped for brevity --></ol></div>

With the following CSS (albeit there's more CSS in the demo, since I've stripped out some of the purely aesthetic stuff here, for brevity, as above):

li {
    /* some stripped out aesthetics */position: relative; /* used to position the '.close' links */
}
lidiv {
    height: 0; /* to allow for animation of the height 'none' to 'block' can't animate */overflow: hidden;
    /* all vendor prefixes removed for brevity, here and later */transition: all 0.5s linear; /* animates to the default properties, from other 'states' */
}
/* li:target matches when the 'id' of the 'li' is equal to the hash/fragment-identifier in the URL */li:targetdiv {
    height: 4em; /* to allow for animation (this is the awkward part of using pure CSS) */transition: all 0.5s linear; /* transitions to the 'selected' state (when the user clicks a link in the 'h2' element) */
}
lia:link, lia:visited {
    /* aesthetics removed */
}
/* styling the 'interactive' states (:hover, :active, :focus), and the 'selected' state using 'li:target h2 a' */lia:hover, lia:active, lia:focus, li:targeth2a {
    font-weight: bold;
    text-decoration: underline;
}
a.close {
/* styling the '.close' link, so it's invisible in the 'non-selected' state */position: absolute;
    opacity: 0;
    width: 0;
    overflow: hidden;
    transition: all 0.65s linear;
}
/* styling the '.close' link, so it's only visible when the question is 'selected' */li:targeta.close {
    opacity: 1;
    width: 4em;
    transition: all 0.65s linear;
}

JS Fiddle demo.

The second approach uses label and input elements (type="radio" if only one question can be visible at a time, type="checkbox" if multiple elements can be visible), based on the following HTML:

<inputid="close"name="question"type="radio" /><divid="faq_container"><ol><li><inputid="faq1"type="radio"name="question" /><h2><labelfor="faq1">Question 1</label></h2><div><div><p>Text, relating to question one.</p><labelfor="close">Close</label><!-- the above 'label' closes the question, by referring to an
                         'input' of the same name (different 'id'), taking advantage
                         of the fact that only one radio-'input' of a given name can
                         be checked (this 'input' is just before the ancestor 'ol') --></div></div></li><!-- subsequent elements follow the above structure, stripped for brevity --></ol></div>

And the following CSS (as before, aesthetics removed for brevity):

/* you could, instead, use a class-name to identify the relevant radio-inputs */input[type=radio] {
    /* using 'display: none' (apparently) in some browsers prevents
       interactivity, so we fake it, by hiding: */position: absolute;
    opacity: 0;
    left: -1000px;
}
/* styling the 'div' that's the adjacent-sibling of an 'h2' which is an
   adjacent-sibling of an 'input' all of which are descendants of a 'div' */divinput + h2 + div {
    height: 0; /* to allow for animating with transitions */overflow: hidden;
    /* vendor prefixes, again, stripped out */transition: all 0.5s linear;
}
/* using 'input:checked + h2 + div' causes problems in Chrome, check the references;
   so we're styling (respectively) a 'div' which is an adjacent sibling to an 'h2'
   which is an adjacent-sibling of a checked 'input', and/or
   a 'div' which is a general-sibling of a checked 'input' (in both cases these are
   all descendants of another 'div' element) */divinput:checked + h2 + div,
divinput:checked ~ div {
    height: 4em; /* to allow for animating with transitions */overflow-y: auto; /* a personal preference, but allows for
                         scrolling if the height is insufficient
                         though it can be a little ugly, with a flicker */transition: all 0.5s linear;
}

JS Fiddle demo.

The same approach can be used with checkboxes, which allows the label to toggle the display of the relevant question, and makes the close links/labels pointless, HTML:

<divid="faq_container"><ol><li><inputid="faq1"type="checkbox"name="question" /><h2><labelfor="faq1">Question 1</label></h2><div><div><p>Text, relating to question one.</p></div></div></li><!-- subsequent elements follow the above structure, stripped for brevity --></ol></div>

And CSS (precisely as the preceding example, but changed input[type=radio] to input[type=checkbox]):

/* duplicated, and aesthetic, CSS removed for brevity */input[type=checkbox] {
    position: absolute;
    opacity: 0;
    left: -1000px;
}

JS Fiddle demo.

References:

:target pseudo-selector.
Adjacent-sibling (+) combinator.
General-sibling (~) combinator.
Problems using chained adjacent-sibling combinators, particularly in Chrome: "Why does the general-sibling combinator allow toggling pseudo-element's content, but not the adjacent-sibling?"

Solution 2:

If a jQuery solution is allowed, here is a quick mock-up.

$(".wrapper").click(function(){
    $(this).children(".answer").toggle();
    $(".wrapper").not(this).toggle();
    $(".faq_container").toggleClass("active");
});

Solution 3:

You should use this kind of structure :

$('.question').on('click', function(ev) {
    ev.preventDefault();
    $(this).find('.answer').show();
});

$('.close').on('click', function(ev) {
    ev.preventDefault();
    ev.stopPropagation();
    var dismiss = $(this).data('dismiss');
    $(this).closest('.'+dismiss).hide();
});

.faq {
    position: relative;
    width: 600px;
}
.question {
    height: 178px; width: 178px;
    margin: 5px;
    padding: 5px;
    border: 1px solid black;
    background: #efefef;
    float: left;
    cursor: pointer;
}
.answer {
    position: absolute;
    top: 0; left: 0;
    height: 578px; width: 578px;
    margin: 5px;
    padding: 5px;
    border: 1px solid black;
    background: #bebebe;
    cursor: default;
    display: none;
}
a.close {
    position: absolute;
    top: 5px; right: 5px;
    display: block;
    height: 20px; width: 20px;
    color: black;
    border: 1px solid black;
    line-height: 20px;
    text-align: center;
    text-decoration: none;
}
a.close:hover {
    background: #9f9f9f;
}

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script><sectionclass="faq"><articleclass="question">Question 1 ?
        <divclass="answer">
            Answer 1 !
            <ahref="#"class="close"data-dismiss="answer">&times;</a></div></article><articleclass="question">Question 2 ?
        <divclass="answer">
            Answer 2 !
            <ahref="#"class="close"data-dismiss="answer">&times;</a></div></article><articleclass="question">Question 3 ?
        <divclass="answer">
            Answer 3 !
            <ahref="#"class="close"data-dismiss="answer">&times;</a></div></article><articleclass="question">Question 4 ?
        <divclass="answer">
            Answer 4 !
            <ahref="#"class="close"data-dismiss="answer">&times;</a></div></article><articleclass="question">Question 5 ?
        <divclass="answer">
            Answer 5 !
            <ahref="#"class="close"data-dismiss="answer">&times;</a></div></article><articleclass="question">Question 6 ?
        <divclass="answer">
            Answer 6 !
            <ahref="#"class="close"data-dismiss="answer">&times;</a></div></article><articleclass="question">Question 7 ?
        <divclass="answer">
            Answer 7 !
            <ahref="#"class="close"data-dismiss="answer">&times;</a></div></article><articleclass="question">Question 8 ?
        <divclass="answer">
            Answer 8 !
            <ahref="#"class="close"data-dismiss="answer">&times;</a></div></article><articleclass="question">Question 9 ?
        <divclass="answer">
            Answer 9 !
            <ahref="#"class="close"data-dismiss="answer">&times;</a></div></article></section>

For the CSS, you'll need to mix float: left for your 3*3 pattern, and position: absolute for each answer.

Html5 Ready

All Css Method For Show/hide Divs

Solution 1:

Solution 2:

Solution 3:

Post a Comment for "All Css Method For Show/hide Divs"