Collapsible lists using HTML and CSS

Question

I have a collapsible list implemented using HTML and CSS. The list works properly, but I need a little modification.

Whenever I click an item in the list it expands. But

Answer 1

Pure HTML & CSS
A checkbox and it's :checked state sounds like a perfect match for your case:

[id^="togList"],                        /* HIDE CHECKBOX */
[id^="togList"] ~ .list,                /* HIDE LIST */
[id^="togList"] + label  span + span,   /* HIDE "Collapse" */
[id^="togList"]:checked + label span{   /* HIDE "Expand" (IF CHECKED) */
  display:none;
}
[id^="togList"]:checked + label span + span{
  display:inline-block;                 /* SHOW "Collapse" (IF CHECKED) */
}
[id^="togList"]:checked ~ .list{
  display:block;                        /* SHOW LIST (IF CHECKED) */
}

  
  
    Expand
    Collapse
  
  

    

      
Item 1
      
Item 2
      
Item 3