Comment faire afficher/masquer div avec une bascule en utilisant CSS?

Question

J'ai créé un menu div qui montrerait/cacherait un autre div en dessous d'un clic de souris. Cependant, j'ai besoin d'une flèche sur le menu div pour basculer sur le clic. Vous savez comment la flèche pointe vers le côté, mais bascule lorsque le div du menu est cliqué et d'autres div div. J'ai le code CSS ci-dessous et le HTML. PS: Je ne dois utiliser que des feuilles CSS.

CSS:

.drop { 
    cursor: pointer; 
    display: block; 
    background: #090; 
} 

.drop + input{ 
display: none; /* hide the checkboxes */ 
} 

.drop + input + div{ 
    display:none; 
} 

.drop + input:checked + div{ 
    display:block; 
} 

en ligne:

<label class="drop" for="_1">Collapse 1 </label> 

<input id="_1" type="checkbox"> 
<div>Content 1</div> 

Votre aide est appréciée!

Answer 1

vous devez changer la structure et d'utiliser un pseudo pour insérer une flèche:

exemple

.drop { 
 
    cursor: pointer; 
 
    display: block; 
 
    background: #090; 
 
} 
 

 
input[type="checkbox"] { 
 
display: none; /* hide the checkboxes */ 
 
} 
 

 
input +.drop + div 
 

 
{ 
 
    display:none; 
 
} 
 
.drop:after { 
 
    content:'▼'; 
 
    } 
 
:checked + .drop:after { 
 
    content:'▲'; 
 
    } 
 
input:checked + .drop + div{ 
 
    display:block; 
 
}

<input id="_1" type="checkbox"> 
 
<label class="drop" for="_1">Collapse 1 </label> 
 

 
<div>Content 1</div>