HTML/CSS Toggle Show/Hide Text

Here's a cute little piece of code I stumbled upon and improved a little that is a simple way to make inline FAQ pages where the answer opens under the question. You see these often but typically require jQuery where this one doesn't.

HOW IT WORKS:
The FAQ links become labels for hidden checkboxes on the pages.
When the link is clicked, the checkbox is toggles either on or off, and the text hides/shows accordingly
To start visible, removed the CHECKED from the input checkbox html
To start hidden, add CHECKED to the input checkbox html
For each div you add/copy, you need to make sure the ID for the label/checkbox pair are unique to that div.

The CSS is as follows:


label {
display:block;
margin:20px 0 0;
border-bottom:1px solid green;
}
label:hover { text-decoration:underline }
input {
position:absolute;
left:-999em
}
.hide {
width:50%;
border:1px solid #000;
background:lightblue;
max-height:999em;
opacity:1;
height:auto;
overflow:hidden;
#transition:opacity .5s linear;
}
.hide p {
padding:10px;
margin:0
}
input[type=checkbox]:checked + div {
opacity:0;
max-height:0;
border:none;
#transition:opacity .5s linear, max-height .5s linear;
}
.follow{border-top:1px solid blue;margin:0}

The HTML is as follows:


<div>
<label for="item-1">FAQ Number 1</label>
<input type="checkbox" name="one" id="item-1" checked>
<div class="hide">
<p>Answer to FAQ Number 1. 
  <ul>
  <li>This is the first div test.</li>
  <li>To make a div initially display, remove CHECKED form the input checkbox.</li>
  <li>To make a div show initially hidden, add CHECKED to the checkbox as done above.</li>
  </ul>
  </p>
</div>

 <label for="item-2">FAQ Number 2</label>
<input type="checkbox" name="two" id="item-2" checked>
<div class="hide">
<p>Answer to FAQ Number 2. Second div test</p>
</div>

 <label for="item-3">FAQ Number 3</label>
<input type="checkbox" name="three" id="item-3" checked>
<div class="hide">
<p>Answer to FAQ Number 3, this is the third div test</p>
</div>
<p class="follow">Following the FAQs...</p>
</div>

The jsfiddle link so you can see it work live and tinker with it yourself:
[codepen.io...]

Try it, hope you like it!
I think this is so simple I'll be using it a lot, probably in more places than just an FAQ page as often I'd like inline explanations such as put the description of each field in a form under it so clicking on the label could explain the field requirements and not clutter up the page, or make an (i)nfo icon per field to expand it.

QUESTION: Anyone know if HOVER could be used to toggle the checkbox without using javascript, just CSS and HTML? Expanding on HOVER would be a neat trick if possible without scripting but I couldn't find any way to make it happen using this checkbox toggle method.

<div> <div class="faq-item"> <label for="item-1">FAQ Number 1</label> <input type="checkbox" name="one" id="item-1" checked> <div class="hide"> <p>Answer to FAQ Number 1. <ul> <li>This is the first div test.</li> <li>To make a div initially display, remove CHECKED form the input checkbox.</li> <li>To make a div show initially hidden, add CHECKED to the checkbox as done above.</li> </ul> </p> </div> </div> <div class="faq-item"> <label for="item-2">FAQ Number 2</label> <input type="checkbox" name="two" id="item-2" checked> <div class="hide"> <p>Answer to FAQ Number 2. Second div test</p> </div> </div> <div class="faq-item"> <label for="item-3">FAQ Number 3</label> <input type="checkbox" name="three" id="item-3" checked> <div class="hide"> <p>Answer to FAQ Number 3, this is the third div test</p> </div> </div> <p class="follow">Following the FAQs...</p> </div>

label { display:block; margin:20px 0 0; border-bottom:1px solid green; } label:hover { text-decoration:underline } input { position:absolute; left:-999em } .hide, .faq-item:hover .hide { width:50%; border:1px solid #000; background:lightblue; max-height:999em; opacity:1; height:auto; overflow:hidden; #transition:opacity .5s linear; } .hide p { padding:10px; margin:0 } input[type=checkbox]:checked + div { opacity:0; max-height:0; border:none; transition:opacity .5s linear, max-height .5s linear; } .follow{border-top:1px solid blue;margin:0}

HTML/CSS Toggle Show/Hide Text

No jQuery required, HTML and CSS only!

incrediBILL

lucy24

graeme_p

Fotiman

incrediBILL

lucy24

w3dk

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week