语义UI可折叠卡？

Question

是否有一种方法可以获取语义UI卡来展开和折叠（可能是description部分，像这样Bootstrap Panel？

示例：

HTML：

<div class="ui card">
    <div class="content">
      <img class="left floated mini ui image" src="//www.gravatar.com/avatar/0ba7243ec0ce737706a5bd88dd496878?r=g&amp;d=identicon&amp;s=24">
      <div class="right floated meta"><i class="chevron down icon"></i></div>
      <div class="header">
        <a href="/contacts/">First Last</a>
      </div>
       <div class="meta">
        Acme Fireworks
      </div>
    <div class="description">
      <table class="ui definition compact celled table">
        <tbody>
          <tr>
            <td><i class="fas fa-building"></i></td>
            <td>Acme Fireworks</td>
        </tr>
        <tr>
          <td><i class="fas fa-at"></i></td>
          <td><a href="mailto:first.last@acme.com">first.last</a></td>
       </tr>
     </tbody>
   </table>
 </div>
 </div><!-- content -->
 <div class="extra content">
   <span class="left floated">
     <i class="star icon"></i>Favorite
   </span>
 </div><!-- /extra content -->
</div>

除了（通过人字形）切换一张卡片之外，是否可以对所有卡片（工具栏按钮）进行切换？

**编辑**

A semi-functional fiddle，显示/隐藏所有卡的内容。