title: Collapsible lists using HTML and CSS
body: <p>I have a collapsible list implemented using HTML and CSS. The list works properly, but I need a little modification.</p>
  
  <p>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.</p>
  
  <p>Please help me to apply the behavior that makes it possible to expand multiple list items at the same time.</p>
  
  <p>I want it to be done in HTML and CSS only.</p>
  
  <p>Here is the implementation I currently have. CSS styles:</p>
  
  <pre class="lang-css prettyprint-override"><code>.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; } }
  </code></pre>
  
  <p>And the HTML markup:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div class="row"&gt;
    &lt;a href="#hide1" class="hide" id="hide1"&gt;Expand&lt;/a&gt;
    &lt;a href="#show1" class="show" id="show1"&gt;Collapse&lt;/a&gt;
    &lt;div class="list"&gt;
      &lt;ul&gt;
        &lt;li&gt;Item 1&lt;/li&gt;
        &lt;li&gt;Item 2&lt;/li&gt;
        &lt;li&gt;Item 3&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>