Results 1 to 1 of 1

Thread: [CSS] Accordion Control

  1. #1

    Thread Starter
    Super Moderator dday9's Avatar
    Join Date
    Mar 2011
    Location
    South Louisiana
    Posts
    11,698

    [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
    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>
        </div>
        
        <input class="AccordionGroup" id="Group2" name="AccordionGroup" type="radio" />
        <label class="AccordionHeader" for="Group2">Tab2</label>
        <div class="AccordionTab">
            <p>Second accordion tab</p>
        </div>
        
        <input class="AccordionGroup" id="Group3" name="AccordionGroup" type="radio" />
        <label class="AccordionHeader" for="Group3">Tab2</label>
        <div class="AccordionTab">
            <p>Third accordion tab</p>
        </div>
    </div>
    CSS
    Code:
    .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 12:04 PM.
    "Code is like humor. When you have to explain it, it is bad." - Cory House
    VbLessons | Code Tags | Sword of Fury - Jameram

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