Как показать/скрыть div с помощью CSS?

Question

Я создал меню div, которое отображало бы/спрятало бы другой div под ним по щелчку мыши. Тем не менее, мне нужна стрелка в меню div для переключения по щелчку. Вы знаете, как стрелка будет указывать на бок, но переключается вниз, когда клик меню и другие div-шоу. У меня есть код CSS ниже и HTML.

PS: Я должен использовать только 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; 
} 

рядный:

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

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

Ваша помощь ценится!

Answer 1

вы должны изменить структуру и использовать псевдо вставить стрелку:

пример

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