如何在html5/css中单独隐藏/显示许多不同的项目

我有一个详细描述的项目列表，我希望能够单独显示或隐藏。我的html当前看起来像

<dl class="stuff">
  <dt>title 1</dt>
  <dd> this is the first item
    <pre>
    A hidden by default lengthy description
    that should be copy and pastable
    </pre>
  </dd>
<dt>title 2</dt>
<dd> this is the second item
  <pre>
  Another lengthy description
  </pre>
  </dd>
</dl>

标题1
这是第一项
默认情况下隐藏的冗长描述
这应该是可复制和可复制的
标题2
这是第二项
另一个冗长的描述

这个问题的答案对我入门很有帮助。我得到的最接近的是，它具有所有所需的行为，但在我向列表中添加新项时需要创建一个新的

id

我的目标列表将有几十个项目，新项目将定期添加。虽然我可以通过编程方式生成html和css代码，并获得所需的行为，但我更希望css保持简单。有没有一种方法可以在不为每个项目创建新id的情况下实现相同的行为（或类似的行为）

我不想求助于javascript