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 as I click on another item in the same list, the previously expanded element gets collapsed while the clicked one gets expanded.

Please help me to apply the behavior that makes it possible to expand multiple list items at the same time.

I want it to be done in HTML and CSS only.

Here is the implementation I currently have. CSS styles:

.row { vertical-align: top; height: auto !important; } list { display: none; } .show { display: none; } .hide:target + .show { display: inline; } .hide:target { display: none; } .hide:target ~ .list { display:inline; } @media print { .hide, .show { display: none; } } 

And the HTML markup:

<div class="row">   <a href="#hide1" class="hide" id="hide1">Expand</a>   <a href="#show1" class="show" id="show1">Collapse</a>   <div class="list">     <ul>       <li>Item 1</li>       <li>Item 2</li>       <li>Item 3</li>     </ul>   </div> </div> 

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.