How to Create a Pure CSS Accordion Using Radio Buttons

In this tutorial I’m going to show you to create a pure css accordion using radio buttons. In previous tutorials I showed you how to create a pure css accordion using the target selector and also how to create a simple jquery accordion. The difference between this and other other css accordion is that you can set a tab that is open by default.

[tutorial_details]

To get us started, we’re going to create an <ul> list with a few <li> items within. Then we’re going to add a radio button within the <li></li> tags that have a label above them. We’ll use these label to select which tab to open.

After this, we simply add a <div class=”content”></div> below our radio button, and we’re done with out html structure. Here’s how your code should look like:

<ul id="accordion">
    <li>
        <label for="first">Fist Title</label>
        <input type="radio" name="accordion" id="first" checked>
        <div class="content">
            <p><!-- Tab Content --></p>
        </div>
    </li>
    <li>
        <label for="second">Second Title</label>
        <input type="radio" name="accordion" id="second">
        <div class="content">
            <p><!-- Tab Content --></p>
        </div>
    </li>
    <li>
        <label for="third">Third Title</label>
        <input type="radio" name="accordion" id="third">
        <div class="content">
            <p><!-- Tab Content --></p>
        </div>
    </li>       
</ul>

And to make it actually work like an accordion, we need to apply the following CSS:

#accordion {
    margin:100px auto;
    padding:0;
    width:500px;
    }    
#accordion li {
    list-style:none;
    width:100%;
    }    
#accordion  li label {
    padding:10px;
    display:block;
    font-family: 'Bree Serif', 'serif';
    font-size:30px;
    line-height:30px;
    color:#FFFFFF;
    background-color:#3498db;
    border-bottom: solid 8px #2980b9;
    }    
/* Hide the radio buttons */
#accordion label + input[type='radio'] {
      display: none;
}    
/* hide content by default */
#accordion .content {
    display:none;
    padding:10px;
    font-family:Constantia, "Lucida Bright", "DejaVu Serif", Georgia, serif;
    font-size:19px;
    line-height:26px;
    background-color:#2ecc71;
}
/* Show content boxes when the radio buttons are checked */
#accordion label + input[type='radio']:checked + .content {
    display:block;
}

The first few lines are just for styling our css accordion. Then we use:

#accordion label + input[type='radio'] {
   display: none;
}

To hide the radio buttons. Don\’t worry they work just fine if you click on the label associated with it.

Our content div, ( <div class="content"></div>) is hidden by default, and this is where magic happens.

The then, when a radio button is clicked, we show the content within the specific <li> using the code below.

#accordion label + input[type='radio']:checked + .content {
   display:block;
}

I hope this tutorial helped you to create a pure css accordion using radio buttons. If you liked this tutorial, make sure to follow me on twitter (@andornagy ) for more awesome tutorials like this.