Accordion (deprecated)

Hinweis: Diese Version des Accordions basiert auf einer älteren ul/li Konstruktion. Es wird empholen die aktuelle Version basierend auf details und summary zu nutzen.

Zur aktuellen Version

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.