@ussebastian/kitdigital/docs/components/content/accordion.html

Kit Digital de la Universidad San Sebastián

<div class="uss-accordion">
  <div class="uss-accordion__item">
    <div class="uss-accordion__header" role="heading">
      <button
        class="uss-accordion__button"
        data-uss-collapsable-trigger-for="accordion-example-01"
        data-uss-collapsable-close-group="accordion-example-group"
      >
        <span class="uss-accordion__title">Título primer acordeón</span>
        <div class="uss-btn btn-inline ml-auto">
          <i
            data-uss-collapsable-rotate-when-opened
            class="uss-icon uss-accordion__icon ri-arrow-drop-down-line"
          ></i>
        </div>
      </button>
    </div>
    <div
      class="uss-accordion__collapse"
      role="region"
      data-uss-collapsable-id="accordion-example-01"
    >
      <div class="uss-accordion__body">
        <p>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium ad aspernatur at
          consectetur eius eos fuga hic, maiores maxime modi mollitia obcaecati perspiciatis quam
          quas quis repellendus tenetur vitae voluptas?
        </p>
      </div>
    </div>
  </div>
  <div class="uss-accordion__item">
    <div class="uss-accordion__header" role="heading">
      <button
        class="uss-accordion__button"
        data-uss-collapsable-trigger-for="accordion-example-02"
        data-uss-collapsable-close-group="accordion-example-group"
      >
        <span class="uss-accordion__title">Título segundo acordeón</span>
        <div class="uss-btn btn-inline ml-auto">
          <i
            data-uss-collapsable-rotate-when-opened
            class="uss-icon uss-accordion__icon ri-arrow-drop-down-line"
          ></i>
        </div>
      </button>
    </div>
    <div
      class="uss-accordion__collapse"
      role="region"
      data-uss-collapsable-id="accordion-example-02"
    >
      <div class="uss-accordion__body">
        <p>
          <button class="uss-btn uss-btn--primary">
            <span>boton</span>
          </button>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium ad aspernatur at
          consectetur eius eos fuga hic, maiores maxime modi mollitia obcaecati perspiciatis quam
          quas quis repellendus tenetur vitae voluptas?
        </p>
      </div>
    </div>
  </div>
  <div class="uss-accordion__item">
    <div class="uss-accordion__header" role="heading">
      <button
        class="uss-accordion__button"
        data-uss-collapsable-trigger-for="accordion-example-03"
        data-uss-collapsable-close-group="accordion-example-group"
      >
        <span class="uss-accordion__title">Título tercer acordeón</span>
        <div class="uss-btn btn-inline ml-auto">
          <i
            data-uss-collapsable-rotate-when-opened
            class="uss-icon uss-accordion__icon ri-arrow-drop-down-line"
          ></i>
        </div>
      </button>
    </div>
    <div
      class="uss-accordion__collapse"
      role="region"
      data-uss-collapsable-id="accordion-example-03"
    >
      <div class="uss-accordion__body">
        <p>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium ad aspernatur at
          consectetur eius eos fuga hic, maiores maxime modi mollitia obcaecati perspiciatis quam
          quas quis repellendus tenetur vitae voluptas?
        </p>
      </div>
    </div>
  </div>
  <div class="uss-accordion__item">
    <div class="uss-accordion__header" role="heading">
      <button
        class="uss-accordion__button"
        data-uss-collapsable-trigger-for="accordion-example-04"
        data-uss-collapsable-close-group="accordion-example-group"
      >
        <span class="uss-accordion__title">Título cuarto acordeón</span>
        <div class="uss-btn btn-inline ml-auto">
          <i
            data-uss-collapsable-rotate-when-opened
            class="uss-icon uss-accordion__icon ri-arrow-drop-down-line"
          ></i>
        </div>
      </button>
    </div>
    <div
      class="uss-accordion__collapse"
      role="region"
      data-uss-collapsable-id="accordion-example-04"
    >
      <div class="uss-accordion__body">
        <p>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium ad aspernatur at
          consectetur eius eos fuga hic, maiores maxime modi mollitia obcaecati perspiciatis quam
          quas quis repellendus tenetur vitae voluptas?
        </p>
      </div>
    </div>
  </div>
</div>