Home  >  Article  >  Web Front-end  >  How to Create a Collapsible Div with Minimal CSS?

How to Create a Collapsible Div with Minimal CSS?

Barbara Streisand
Barbara StreisandOriginal
2024-10-30 17:30:03247browse

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!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn