G-Loot DS — accordion structure

by Augustin Hiebel

HTML

<div className="accordion">

  <!-- Accordion item (active) -->
  <div className="accordion-item is-active">
    <div className="accordion-header" aria-expanded="true" aria-controls>
      <div className="item">
        <div className="item-content">
          <div className="p-2 item-title font-headings text-lg italic">Title</div>
        </div>
        <div className="item-actions">
          <div><span className="icon icon-24 icon-arrow-sm-down"></span></div>
        </div>
      </div>
    </div>
    <div className="accordion-collapse">
      ...
    </div>
  </div>

  <!-- Accordion item -->
  <div className="accordion-item">
    <div className="accordion-header" aria-expanded="false" aria-controls>
      <div className="item">
        <div className="item-content">
          <div className="p-2 item-title font-headings text-lg italic">Title</div>
        </div>
        <div className="item-actions">
          <div><span className="icon icon-24 icon-arrow-sm-down"></span></div>
        </div>
      </div>
    </div>
    <div className="accordion-collapse">
      ...
    </div>
  </div>

</div>