CODEWITHSUNDEEP
csstogglearrow-keys
Ched Jose
Ched Jose

Reputation: 103

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

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!

Upvotes: 6

Views: 13394

Answers (1)

G-Cyrillus
G-Cyrillus

Reputation: 105903

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>

Upvotes: 15

Related Questions