Grains Of Sand Web Design, CSS Demos & HTML5 Templates by tupence

CSS3 Demos - CSS Styled Frequently Asked Questions

Use CSS to create frequently asked questions where the answer slides down when the question is hovered over.

What We're Aiming For

I use this method for frequently asked questions on Sonic Biro, and have been asked for a tutorial, so here we are...
Hover over the question to see the answer.

The question goes here... The answer goes here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero.
What can I use your screencaps for? Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum.
Why haven't you added screencaps for the latest episode yet? Longer answer than the rest. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta.

Step By Step

Step One
Add the questions and answers

HTML

<ul id="faq">
<li>
<a href="#">The question goes here...</a>
The answer goes here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero.
</li>
<li class="long">
<a href="#">Why haven't you added screencaps for the latest episode yet?</a>
Longer answer than the rest. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta.
</li>
</ul>

CSS FOR THIS STEP

None at the moment, lets just see the basic faqs - which you could of course use as they are.

Result

The question goes here... The answer goes here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero.
What can I use your screencaps for? Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum.
Why haven't you added screencaps for the latest episode yet? Longer answer than the rest. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta.

Step Two
Style the text and hide the answers - nothing will happen yet when the questions are hovered

HTML

Same as step one

CSS FOR THIS STEP

/* Style the list */
ul#faq{ /*if you want the questions to be numbered, use ol#faq here instead*/
width:90%;
}

/* Style the list items */
ul#faq li {
list-style-type:none; /* remove the bullet point - don't add this line if using an ordered list */
height: 30px; /* same height as ul#faq a */
overflow: hidden; /*anything outside the 30px set above won't be shown, therefore the answer should be hidden. If the answer is still visible, decrease the height */
margin-bottom: 20px;
border: 1px solid #ccd6dc;
transition: height ease-in-out 600ms; /*speed at which the dropdown appears*/
-o-transition: height ease-in-out 600ms;
-moz-transition: height ease-in-out 600ms;
-webkit-transition: height ease-in-out 600ms;
}

/*Style the link*/
ul#faq a {
display: block; /*places the question on its own line*/
height: 30px; /*same as ul#faq li */
padding:5px 5px 0 5px;
color: #1e1e1e;
text-decoration: none; /*remove the link underline*/
background:#eceecb;
}

Result

The question goes here... The answer goes here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero.
What can I use your screencaps for? Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum.
Why haven't you added screencaps for the latest episode yet? Longer answer than the rest. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta.

Step Three
Display the answer when a question is hovered over

HTML

same as step one

CSS FOR THIS STEP

/*Increase the height of the list item on hover, making the answer visible*/
ul#faq li:hover {
height:100px; /*this is the full height once the question is hovered over, you may need to increase the height if your snawers are long. Or you could consider adding using a different class on long answers - see ul#faq .long:hover below*/
}

ul#faq .long:hover { /*this is for longer answers*/
height:130px;
}

ul#faq li:hover a {
font-weight: bold;
}

Result

The question goes here... The answer goes here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero.
What can I use your screencaps for? Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum.
Why haven't you added screencaps for the latest episode yet? Longer answer than the rest. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta.

Full Code For You To Copy And Paste

HTML

<ul id="faq">
<li>
<a href="#">The question goes here...</a>
The answer goes here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero.
</li>
<li>
<a href="#">What can I use your screencaps for?</a>
Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum.
</li>
<li class="long">
<a href="#">Why haven't you added screencaps for the latest episode yet?</a>
Longer answer than the rest. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta.
</li>
</ul>

CSS

ul#faq{
width:90%;
}
ul#faq li {
list-style-type:none;
height: 30px; /*Set this to slightly larger than the height of the a: element below so that only the question shows */
overflow: hidden;
margin-bottom: 20px;
border: 1px solid #ccd6dc;
transition: height ease-in-out 600ms; /*speed at which the dropdown appears*/
-o-transition: height ease-in-out 600ms;
-moz-transition: height ease-in-out 600ms;
-webkit-transition: height ease-in-out 600ms;
}
ul#faq a {
display: block;
height: 30px;
padding:5px 5px 0 5px;
font-size:95%;
color: #1e1e1e;
text-decoration: none;
background:#eceecb;
}
ul#faq li:hover {
height:100px;
}
ul#faq .long:hover { /*this is for longer answers*/
height:130px;
}
ul#faq li:hover a {
font-weight: bold;
font-size:90%;
}

Support Section

Browser Support

The demo works in all the latest browsers, including IE8 (except that CSS3 transitions are not supported by IE8 or IE9, so the graceful sliding down of the answer will not work).

More CSS3 Demos This Way