css - 单击列表并展开一个框

Question

我有一个元素列表，每个列表都包含一个默认情况下隐藏的框，点击每个列表后应该显示该框。

现在的问题是展开一个列表后，其他列表项也会展开。

请查看图片:

有什么办法可以只展开被点击的元素吗？

<li>
  user name test
  <div class="content">
    <span>
      A card can be used to display content related to 
      a single subject. The content can consist of multiple 
      elements of varying types and sizes.
    </span>
  </div>
</li>
<li>
  user name test
  <div class="content">
    <span>
      A card can be used to display content related to 
      a single subject. The content can consist of multiple 
      elements of varying types and sizes.
    </span>
  </div>
</li>

fiddle :http://jsfiddle.net/8qLt3wru/4/

Answer 1

一个解决方法是使用 HTML <details>披露和 CSS 是这样的:

details {
  float:left;
  width: 50%;
    display:flex;
  flex-wrap:wrap;
}

<details>
    <summary>Details</summary>
    This is an example of the details disclosure.
</details>
<details>
    <summary>Details</summary>
    This is an example of the details disclosure.
</details>

来源:https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details