Accordion

Für ausklappbare Einheiten kann das Accordion genutzt werden. Dieses ist in zwei Versionen verfügbar, ohne Hintergrund und mit alternierenden Hintergründen. Diese Einheit kann mit vielen anderen Einheiten kombiniert werden, sollte aber aufgrund der visuellen Komplexität möglichst alleinstehend genutzt werden.

Accordion can be used for units that can be opened to show or closed to hide details. It is available in two versions: one without a background and one with alternating backgrounds. The Accordion can be combined with many other units; however, because of its visual complexity, you should use it sparingly and with a specific goal in mind, taking the page overview into consideration.

Default

  • Accordion title 1
    Philosophy is considered a science but it is difficult to say, when one has to compare with an ordinary science, for example biology, or chemistry.
  • Accordion title 2
    Philosophy is considered a science but it is difficult to say, when one has to compare with an ordinary science, for example biology, or chemistry.
  • Accordion title 3
    Philosophy is considered a science but it is difficult to say, when one has to compare with an ordinary science, for example biology, or chemistry.
HTML
  <ul class="js-accordion"
       id="myAccordion1">
    <li>
      <strong class="js-accordion__heading"><span class="title">Accordion title 1</span></strong>
      <div class="js-accordion__panel">
        <div class="text">
            <div class="textile">
              Philosophy is considered a science but it is difficult to say, when one has to compare with an ordinary science, for example biology, or chemistry.
            </div>
        </div>
      </div>
    </li>
    <li>
      <strong class="js-accordion__heading"><span class="title">Accordion title 2</span></strong>
      <div class="js-accordion__panel">
        <div class="text">
            <div class="textile">
              Philosophy is considered a science but it is difficult to say, when one has to compare with an ordinary science, for example biology, or chemistry.
            </div>
        </div>
      </div>
    </li>
    <li>
      <strong class="js-accordion__heading"><span class="title">Accordion title 3</span></strong>
      <div class="js-accordion__panel">
        <div class="text">
            <div class="textile">
              Philosophy is considered a science but it is difficult to say, when one has to compare with an ordinary science, for example biology, or chemistry.
            </div>
        </div>
      </div>
    </li>
  </ul>

Odd/Even Layout

Add class .accordion--oddeven to accordionul-element to change the layout.

  • Accordion title 1
    Philosophy is considered a science but it is difficult to say, when one has to compare with an ordinary science, for example biology, or chemistry.
  • Accordion title 2
    Philosophy is considered a science but it is difficult to say, when one has to compare with an ordinary science, for example biology, or chemistry.
  • Accordion title 3
    Philosophy is considered a science but it is difficult to say, when one has to compare with an ordinary science, for example biology, or chemistry.

Options

Option: Multiple open

Set the attribute data-allow-multiple="true" to modul-acccordion ul-element to allow multiple accordion sections to be expanded at the same time
  • Accordion title 1
    Philosophy is considered a science but it is difficult to say, when one has to compare with an ordinary science, for example biology, or chemistry.
  • Accordion title 2
    Philosophy is considered a science but it is difficult to say, when one has to compare with an ordinary science, for example biology, or chemistry.
  • Accordion title 3
    Philosophy is considered a science but it is difficult to say, when one has to compare with an ordinary science, for example biology, or chemistry.

Option: Initial open

Set the attribute data-initial-open="true" to modul-acccordion li-element to open that accordion element on page load.
  • Initial open
    Philosophy is considered a science but it is difficult to say, when one has to compare with an ordinary science, for example biology, or chemistry.
  • Initial close (default)
    Philosophy is considered a science but it is difficult to say, when one has to compare with an ordinary science, for example biology, or chemistry.
  • Initial close (default)
    Philosophy is considered a science but it is difficult to say, when one has to compare with an ordinary science, for example biology, or chemistry.

Option: Toggle all

Set the attribute data-allow-toggleall="true" to modul-acccordion ul-element to add an extra "toggle all" element. You can set the open/close text with the data-toggleall-opentext and data-toggleall-closetext attributes. (Automatically enables multiple option)
  • Accordion title 1
    Philosophy is considered a science but it is difficult to say, when one has to compare with an ordinary science, for example biology, or chemistry.
  • Accordion title 2
    Philosophy is considered a science but it is difficult to say, when one has to compare with an ordinary science, for example biology, or chemistry.
  • Accordion title 3
    Philosophy is considered a science but it is difficult to say, when one has to compare with an ordinary science, for example biology, or chemistry.