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
  • <!--The questions and answers will be held in an unordered list - if you want the questions to be numbered use an ordered list (substitute ul for ol) instead-->
  • <ul id="faq"> <!--give the list an id to enable styling-->
  • <li> <!--each question and answer is added as a list item-->
  • <a href="#">The question goes here...</a> <!--questions are placed inside a link tag with a dummy # url-->
  • The answer goes here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero.
    </li>
  • <li class="long"> <!--a class has been added to this list item to enable a longer answer to fit-->
  • <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