How to Create a Collapsible Div with Minimal CSS?

Pure CSS Collapse/Expand Div with Minimal Code

The provided CSS collapsable div using the :target pseudoclass can be used to create a page with multiple collapsible sections efficiently without a considerable amount of CSS. Here's how:

Utilizing the :target pseudoclass, you can establish a system where each question is assigned a unique ID, such as "#q1", "#q2", and so on. When the corresponding ' ' button is clicked, it will trigger the ID's target element to display, revealing the associated answer div.

CSS Code:

<code class="css">.FAQ {
    vertical-align: top;
    height: auto !important;
}
.list {
    display: none;
    height: auto;
    margin: 0;
    float: left;
}
.show {
    display: none;
}
#wrapper > .hide:target + .show {
    display: inline;
}
#wrapper > .hide:target {
    display: none;
}
#wrapper > .hide:target ~ .list {
    display: inline;
}</code>

In this code, the #wrapper is used to group all the question-answer pairs, ensuring that the :target effect is limited to that specific section. Remove it if you prefer to modify the entire page.

Example Usage:

<code class="html"><div id="wrapper">
    <a href="#q1" class="hide" id="hide1">+</a>
    <a href="#q1show" class="show" id="show1"> -</a>
    <div class="question"> Question 1? </div>
    <div class="list">
        <p> Answer 1 </p>
    </div>
</div></code>

Repeat this pattern for each question, ensuring unique IDs for each set of elements. As a result, you can create multiple collapsible sections with minimal CSS code.

Browser Support:

Note that this solution relies solely on CSS3 and may not be supported by older browsers. Additionally, the use of :target can result in performance issues on pages with many collapsible sections.

The above is the detailed content of How to Create a Collapsible Div with Minimal CSS?. For more information, please follow other related articles on the PHP Chinese website!