Welcome to WebmasterWorld Guest from 18.232.124.77

Forum Moderators: open

Message Too Old, No Replies

HTML/CSS Toggle Show/Hide Text

No jQuery required, HTML and CSS only!

     
6:34 am on Mar 12, 2016 (gmt 0)

System Operator from US 

incredibill is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Jan 25, 2005
posts:14664
votes: 99


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.
8:11 am on Mar 12, 2016 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member lucy24 is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month

joined:Apr 9, 2011
posts:15754
votes: 827


Anyone know if HOVER could be used to toggle the checkbox without using javascript, just CSS and HTML?

Outside of js, isn't the "hover" behavior only recognized on <a> elements? So you'd have to make all your doodads into anchors. Not sure if they really have to lead to anything (that is, have a "href" attribute, which could be "#"), or if they just have to be called <a>.
12:50 pm on Mar 12, 2016 (gmt 0)

Senior Member from GB 

WebmasterWorld Senior Member graeme_p is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Nov 16, 2005
posts: 2978
votes: 200


@incrediBILL. very neat. Will use this.

@lucy24, Hover can apply to any element [w3.org...] [developer.mozilla.org...] at least in HTML5
3:21 pm on Mar 12, 2016 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Oct 17, 2005
posts: 5021
votes: 26


Something like this:

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

and the CSS:

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}
6:28 pm on Mar 12, 2016 (gmt 0)

System Operator from US 

incredibill is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Jan 25, 2005
posts:14664
votes: 99


@fotiman - that's cool. guess I was too fixated on the checkbox state toggle to see such a simple solution but hover wont work on mobile, but cool for desktop
Thanks!
8:03 pm on Mar 12, 2016 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member lucy24 is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month

joined:Apr 9, 2011
posts:15754
votes: 827


Hover can apply to any element ... at least in HTML5

And the punchline is: Poring through the CSS for my online games, I find that I have actually done this.
li.dropmenu form {display: none;}
li.dropmenu:hover > form {display: block;}
Clearly it can't have been very traumatic, since I'd forgotten all about it :)

So, yeah, all CSS, no scripts.
2:57 pm on Mar 17, 2016 (gmt 0)

New User

joined:Mar 17, 2016
posts: 14
votes: 3


Hover can apply to any element ... at least in HTML5


It was IE6 that only supported the :hover pseudo class on links.