[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.