Results 1 to 1 of 1
  1. #1

    Thread Starter
    Super Moderator dday9's Avatar
    Join Date
    Mar 2011
    South Louisiana

    [CSS] Accordion Control

    This is a pure HTML and pure CSS accordion control meaning that there is no JavaScript or JQuery involved. Here is the code:

    HTML Code:
    <div class="Accordion">
        <input checked="checked" class="AccordionGroup" id="Group1" name="AccordionGroup" type="radio" />
        <label class="AccordionHeader" for="Group1">Tab1</label>
        <div class="AccordionTab">
            <p>First accordion tab</p>
        <input class="AccordionGroup" id="Group2" name="AccordionGroup" type="radio" />
        <label class="AccordionHeader" for="Group2">Tab2</label>
        <div class="AccordionTab">
            <p>Second accordion tab</p>
        <input class="AccordionGroup" id="Group3" name="AccordionGroup" type="radio" />
        <label class="AccordionHeader" for="Group3">Tab2</label>
        <div class="AccordionTab">
            <p>Third accordion tab</p>
    .Accordion *, .AccordionGroup:checked + label + div {
        display: block;
    .AccordionGroup, .AccordionGroup, .AccordionGroup + label + div {
        display: none;
    .AccordionGroup:checked + label {
        background-color: #00C;
        color: #fff;
    .AccordionHeader {
        background-color: #fff;
        border: 1px solid #ccc;
        color: #000;
        cursor: pointer;
        padding-left: 1em;
        padding-top: 1em;
    .AccordionTab {
        background-color: #fff;
        border: 1px solid #ccc;
        padding-left: 1em;
    Here is a Fiddle: https://jsfiddle.net/kkwvoo6g/

    The way that it works is by using a hidden RadioButton to check for when header was clicked. Once the header was clicked it shows the first DIV element after the RadioButton and hides all the rest. I've done a little bit of styling to it such as coloring the background of the selected group and setting borders on all the headers/tabs, but for the most part it is as basic as it gets.
    Last edited by dday9; Feb 24th, 2016 at 11:04 AM.

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts


Click Here to Expand Forum to Full Width

We have made updates to our Privacy Policy to reflect the implementation of the General Data Protection Regulation.