Pure CSS Collpasible Accordion
HTML accordion control made purely out of css. No JS !! Any accordion would definitely need some JS function The following accordion uses input type="radio" and the ' :checked + div ' CSS selector to collapse and expand content. Example selector: input[type="radio"]:checked + div{ /*expand this*/ height:200px; } The collapse code input[type="radio"]:not(:checked) + div{ /*collapse this*/ height:0px; } How does it work? The title of each collapsible is a label which has the attribute for="collapsible-1" to trigger the radio button collapsible-1 . Clicking the label checks the corresponding radio button. The div following the radio button is expanded as per the CSS code shown above [this collapses the rest of the div s automatically because its a radio button group, selecting one un-selects the other radio by default]. A radio button is added say collapse-all which is isolated and is not associa