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!

Feather

you may use a label for this, it can stand anywhere if for attribute is there. pseudo element can also be used. – Lactary

Thanks! But I guess my question is how would you do that? – Feather

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>

Lactary