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 divs 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 associated with any collapsible
Each 'x' is a label at top right of the collapsible which triggers this collapse-all radio.
Since this radio button is not associated with any collapsible, nothing expands and all other collapsible are collapsed automatically.

The CSS accordion:

Collapsible 1

x Lorem ipsum dolor sit amet, magna ante erat lacinia integer nunc amet, dolorem donec id convallis sit. Dui ante, facilisis nulla mauris diam, quis donec wisi, curabitur eleifend dignissim, non sed libero esse et amet. In vivamus mauris amet, eget amet ipsum sed fermentum vestibulum, sed dui auctor nunc eros. Et massa sit dui nullam, neque pellentesque vitae dolor ut rutrum, aliquam vel lectus duis, morbi sagittis. In aenean, mi mauris, sit varius velit id arcu dictum, nulla placerat fringilla

Collapsible 2

x Lorem ipsum dolor sit amet, magna ante erat lacinia integer nunc amet, dolorem donec id convallis sit. Dui ante, facilisis nulla mauris diam, quis donec wisi, curabitur eleifend dignissim, non sed libero esse et amet. In vivamus mauris amet, eget amet ipsum sed fermentum vestibulum, sed dui auctor nunc eros. Et massa sit dui nullam, neque pellentesque vitae dolor ut rutrum, aliquam vel lectus duis, morbi sagittis. In aenean, mi mauris, sit varius velit id arcu dictum, nulla placerat fringilla

Collapsible 3

x Lorem ipsum dolor sit amet, magna ante erat lacinia integer nunc amet, dolorem donec id convallis sit. Dui ante, facilisis nulla mauris diam, quis donec wisi, curabitur eleifend dignissim, non sed libero esse et amet. In vivamus mauris amet, eget amet ipsum sed fermentum vestibulum, sed dui auctor nunc eros. Et massa sit dui nullam, neque pellentesque vitae dolor ut rutrum, aliquam vel lectus duis, morbi sagittis. In aenean, mi mauris, sit varius velit id arcu dictum, nulla placerat fringilla

Complete HTML and CSS