Wie macht man Div mit einem Toggle mit CSS anzeigen/verbergen?

Question

Ich erstellte ein Menü div, das ein anderes div darunter bei Mausklick anzeigen/ausblenden würde. Allerdings benötige ich einen Pfeil im Menü div, um bei Klick umzuschalten. Sie wissen, wie der Pfeil zur Seite zeigt, schaltet aber nach unten, wenn das Menü div geklickt wird und andere div-Shows. Ich habe den CSS-Code unten und den HTML-Code.

PS: Ich muss nur CSS verwenden.

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

inline:

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

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

Ihre Hilfe ist willkommen!

Answer 1

Sie würde die Struktur ändern und eine Pseudo verwenden einen Pfeil einzufügen:

Beispiel

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