Comment créer un Div pliable avec un minimum de CSS ?

Réduire/agrandir le div CSS pur avec un code minimal

Le div pliable CSS fourni utilisant la pseudoclasse :target peut être utilisé pour créer une page avec plusieurs sections pliables efficacement sans une quantité considérable de CSS. Voici comment :

En utilisant la pseudoclasse :target, vous pouvez établir un système dans lequel chaque question se voit attribuer un identifiant unique, tel que "#q1", "#q2", etc. Lorsque le bouton ' ' correspondant est cliqué, cela déclenchera l'affichage de l'élément cible de l'ID, révélant le div de réponse associé.

Code CSS :

<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>

Dans ce code, le #wrapper est utilisé pour regrouper toutes les paires question-réponse, garantissant que l'effet :target est limité à cette section spécifique. Supprimez-le si vous préférez modifier la page entière.

Exemple d'utilisation :

<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>

Répétez ce modèle pour chaque question, en garantissant des identifiants uniques pour chaque ensemble d'éléments. . Par conséquent, vous pouvez créer plusieurs sections pliables avec un minimum de code CSS.

Prise en charge du navigateur :

Notez que cette solution repose uniquement sur CSS3 et peut ne pas être prise en charge par navigateurs plus anciens. De plus, l'utilisation de :target peut entraîner des problèmes de performances sur les pages comportant de nombreuses sections réductibles.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!