I'm relatively new to web programming (i.e. less than a month).

What I am trying to do is create a nice smooth hide/reveal effect for an FAQ list, as can be seen on this webisite:

I realise that this website is using javascript to create the effect, but I was wondering if there was anyway to do this with just CSS.

The HTML5 < details > < summary > tags seem to work fine in terms of structure (despite only working in chrome and safari):

<details>
<summary>About Us</summary>
<p>Some information about us</p>
</details> 

The only problem is that the transitions are very harsh, and yet I can't seem to use CSS transitions as I want the animation on a click, rather than hover etc (plus the properties don't change so there is nothing to transition between).

Is there anyway of doing this, or does it just require getting to grips with Javascript? Obviously that is the next step anyway, I was just hoping there was a way to do this in CSS so that I could get this working asap.

Thanks in advance.

I'm relatively new to web programming (i.e. less than a month).

What I am trying to do is create a nice smooth hide/reveal effect for an FAQ list, as can be seen on this webisite:

http://www.hl.co.uk/pensions/sipp/frequently-asked-questions

I realise that this website is using javascript to create the effect, but I was wondering if there was anyway to do this with just CSS.

The HTML5 < details > < summary > tags seem to work fine in terms of structure (despite only working in chrome and safari):

<details>
<summary>About Us</summary>
<p>Some information about us</p>
</details> 

The only problem is that the transitions are very harsh, and yet I can't seem to use CSS transitions as I want the animation on a click, rather than hover etc (plus the properties don't change so there is nothing to transition between).

Is there anyway of doing this, or does it just require getting to grips with Javascript? Obviously that is the next step anyway, I was just hoping there was a way to do this in CSS so that I could get this working asap.

Thanks in advance.

• javascript
• jquery
• css
• html

• since you want to animate on click I think you might have to use javascript – Arun P Johny Commented Jan 30, 2014 at 3:14
• ah ok, I was wondering if that would be the case. Hopefully the Javascript involved won't be too plex so I can get it all working fairly quickly. – advert665 Commented Jan 30, 2014 at 3:17
• If you need to support IE 9 and below you'll need at least some javascript. caniuse./css-transitions – Jon P Commented Jan 30, 2014 at 5:09

4 Answers 4

If you get creative, this can actually be done with pure CSS.

(PS - I only put a <form> wrapper to allow the radio buttons to be reset without affecting the multiple-choice checkbox buttons)

Here is a nice example for you

CSS

span, p {
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
}
input[type="reset"] {
    display: block;
    border: 1px solid pink;
    background: maroon;
    color: white;
    padding: 5px;
    margin: 5px;
    font-family: sans;
}
p {
    float: left;
    clear: left;
    overflow: hidden;
    display: table-row;
}
label {
    width: 100%;
    font-size: 200%;
    font-weight: bold;
}
input[type="checkbox"], input[type="radio"] {
    border: none;
    background: transparent;
    display: none;
}
input[type="checkbox"] ~ span, input[type="radio"] ~ span {
    display: block;
    float: left;
    clear: left;
}
input[type="checkbox"]:not(:checked) ~ span, input[type="radio"]:not(:checked) ~ span {
    opacity: 0;
    height: 0;
}
input[type="checkbox"]:checked ~ span, input[type="radio"]:checked ~ span {
    opacity: 1;
    height: auto;
}

HTML

<h1>Singles</h1>
<form id="singles" onsubmit="return false;">
    <p class="option">
        <input type="radio" id="one" name="hard" />
        <label for="one">OneOneOneOne</label> 
        <span><input type="reset" form="singles" value="Hide" />
            If you want them to only see one item at a time, use a radio button. If you want them to see multiple, use a checkbox. Your transition property will be checked</span>
    </p>
    <p class="option">
        <input type="radio" id="two" name="hard" />
        <label for="two">TwoTwoTwoTwo</label> 
        <span><input type="reset" form="singles" value="Hide" />
            Who knows how many licks it takes to get to the center if a woodchuck could chuck wood by the sea shore with Sally?</span>
    </p>    
    <p class="option">
        <input type="radio" id="three" name="hard" />
        <label for="three">ThreeThreeThreeThree</label> 
        <span><input type="reset" form="singles" value="Hide" />If you want them to only see one item at a time, use a radio button. If you want them to see multiple, use a checkbox. Your transition property will be checked</span>
    </p>
    <p class="option">
        <input type="radio" id="four" name="hard" />
        <label for="four">FourFourFourFour</label> 
        <span><input type="reset" form="singles" value="Hide" />
            Who knows how many licks it takes to get to the center if a woodchuck could chuck wood by the sea shore with Sally?</span>
    </p>
</form>
<h1>Multiples</h1>
<form id="multiples" onsubmit="return false;">
    <p class="option">
        <input type="checkbox" id="one2" name="easy" />
        <label for="one2">OneOneOneOne</label> 
        <span>If you want them to only see one item at a time, use a radio button. If you want them to see multiple, use a checkbox. Your transition property will be checked</span>
    </p>
    <p class="option">
        <input type="checkbox" id="two2" name="easy" />
        <label for="two2">TwoTwoTwoTwo</label> 
        <span>Who knows how many licks it takes to get to the center if a woodchuck could chuck wood by the sea shore with Sally?</span>
    </p>    
    <p class="option">
        <input type="checkbox" id="three2" name="easy" />
        <label for="three2">ThreeThreeThreeThree</label> 
        <span>If you want them to only see one item at a time, use a radio button. If you want them to see multiple, use a checkbox. Your transition property will be checked</span>
    </p>
    <p class="option">
        <input type="checkbox" id="four2" name="easy" />
        <label for="four2">FourFourFourFour</label> 
        <span>Who knows how many licks it takes to get to the center if a woodchuck could chuck wood by the sea shore with Sally?</span>
    </p>
</form>

Make two classes. Each with different transitions. Use toggleClass to change your html element to the class with the transition you want.

jQuery toggleClass

It still uses javascript, but it's just a simple class switch so your animations will be smoother.

If you only have a small number of items, Deryck's answer suits you best.

However, if it's a large amount, Javascript/jQuery is your best bet.

How it's done:

jQuery:

$('.detail').slideUp(); //hides all the details
$('.item').on('click', function({
    $('.detail').slideUp(); //hides any shown details
    $(this).next().toggleSlide(); //shows the details of the item selected
});

HTML:

<div class="item">Item 1</div>
<div class="detail">Details about Item 1</div>
<div class="item">Item 2</div>
<div class="detail">Details about Item 2</div>
<div class="item">Item 3</div>
<div class="detail">Details about Item 3</div>
...

.item indicates an item, e.g. FAQ question, and .details indicates the expansion of that item, e.g. the answer to a FAQ question.

Alternatively, you can nest the .details inside of their respective .items.

To add to the jQuery answers...

Wrap what you have in a div with an id of say "FAQ". Wrap the answer in another div so you have something like

<div id="FAQ">
    <section>
        <summary>Question 1</summary>
        <div>
            <p>Some Stuff 1</p><p>Some Stuff 2</p>
        </div>
    </section>
    <!-- Repeat as required -->
</div>

Add the following css to hide the answers and make section a block element

#FAQ section>div
{
    display:none;
}

#FAQ section
{
    display:block;
}

Include the jquery library and then include the following in a script tag

$(document).ready(){
    $("#FAQ summary").click(function(){
        $(this).next("div").slideToggle('slow');
    });
};

See it in action here: http://jsfiddle/qu6ef/

This will is a little different from some of the other solutions in that the answer will only be hidden if the question is clicked again. Why stop users from seeing more than one answer at a time? The nice thing about this solution is it is achieved with 5 lines of javascript once you include jQuery

Take some time to look up what I've used with jQuery:

• Document Ready
• Click Event Listener/Handler
• Next - Selects a sibling
• Sliding Animation