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.