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

If you use a modern browser, you can just use HTML5 like this:

<details>
  <summary>See More</summary>
  This text will be hidden if your browser supports it.
</details>

One can find more information about <details> HTML element, including other examples, on MDN.

Answer 2

Based on the answers above, just created a single HTML with CSS and JS embedded for this kind of task. GitHub repo, the link will stay valid as I have no plan to remove it.

Answer 3

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) */
}

<div class="row">
  <input id="togList1" type="checkbox">
  <label for="togList1">
    <span>Expand</span>
    <span>Collapse</span>
  </label>
  <div class="list">
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
    </ul>
  </div>
</div>