How to make show/hide div with a toggle using CSS?

Question

I created a menu div that would show/hide another div below it on mouse click. However, I need an arrow on the menu div to toggle on click. You know like how the arrow would be pointing to side, but toggles downward when the menu div is clicked and other div shows. I have the CSS code below and the HTML.

PS: I am required to use CSS only.

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>

Your help is appreciated!

Answer 1

you would have to change the structure and use a pseudo to insert an arrow:

example

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