Accordion

Cambie la visibilidad del contenido en su proyecto con algunas clases y nuestros complementos de JavaScript.

Accordion sin grupo

Este accordion al dar click no afecta a los demás items.

<div class="accordion" data-toggle="accordion">
  <div class="accordion__item accordion__active">
    <button type="button" class="btn btn--outline ripple btn--block accordion__btn text-primary">#Accordion1</button>
    <div class="accordion__content">
      <div class="accordion__description">
        <p>
          1.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
          et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
          aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
          dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
          officia deserunt mollit anim id est laborum.
        </p>
      </div>
    </div>
  </div>
  <div class="accordion__item">
    <button type="button" class="btn btn--outline ripple btn--block accordion__btn text-secondary">#Accordion2</button>
    <div class="accordion__content">
      <div class="accordion__description">
        <p>
          2.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
          et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
          aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
          dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
          officia deserunt mollit anim id est laborum.
        </p>
      </div>
    </div>
  </div>
</div>

Accordion con grupo

Este accordion al dar click afecta a los demás items.Se utiliza la clase .accordion__group en la clase .accordion.

<div class="accordion accordion__group" data-toggle="accordion">

  <div class="accordion__item accordion__active">
    <button class="btn btn--outline ripple btn--block accordion__btn text-primary">#Accordion1</button>
    <div class="accordion__content bd--primary text-primary">
      <div class="accordion__description">
        <p>
          1.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
          et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
          aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
          dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
          officia deserunt mollit anim id est laborum.
        </p>
      </div>
    </div>
  </div>

  <div class="accordion__item">
    <button type="button" class="btn btn--outline ripple btn--block accordion__btn text-secondary">#Accordion2</button>
    <div class="accordion__content bd--secondary text-secondary">
      <div class="accordion__description">
        <p>
          2.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
          et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
          aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
          dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
          officia deserunt mollit anim id est laborum.
        </p>
      </div>
    </div>
  </div>

  <div class="accordion__item">
    <button type="button" class="btn btn--outline ripple btn--block accordion__btn text-danger">#Accordion3</button>
    <div class="accordion__content bd--danger text-danger">
      <div class="accordion__description">
        <p>
          3.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
          et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
          aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
          dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
          officia deserunt mollit anim id est laborum.
        </p>
      </div>
    </div>
  </div>

  <div class="accordion__item">
    <button type="button" class="btn btn--outline ripple btn--block accordion__btn text-warning">#Accordion4</button>
    <div class="accordion__content bd--warning text-warning">
      <div class="accordion__description">
        <p>
          4.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
          et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
          aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
          dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
          officia deserunt mollit anim id est laborum.
        </p>
      </div>
    </div>
  </div>
</div>