我有一个使用HTML和CSS实现的可折叠列表。这个列表正常工作，但我需要稍微修改一下。

每当我单击列表中的某个项目时，它就会展开。但是，当我单击同一列表中的另一项时，先前展开的元素将被折叠，而单击的元素将被展开。

请帮助我应用该行为，使你可以同时展开多个列表项。

我希望它只在HTML和CSS中完成。

以下是我目前的实现。CSS样式：

.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; } }

和HTML标记：

<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>