Как сделать, чтобы показать / скрыть div с помощью переключателя с помощью CSS?

Question

Я создал раздел меню, который будет показывать / скрывать другой раздел под ним при щелчке мышью. Тем не менее, мне нужна стрелка в меню 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>