Wie kann ich in einem Anzeige-Template ein HTML-„Akkordeon“ verwenden?

Eine „Akkordeon“-Ansicht ist eine Liste von Elementen, die entweder eine abgekürzte Version ihres Inhalts (normalerweise eine Überschrift oder einen Namen) oder den detailierten Inhalt anzeigen. Durch Klicken auf die einzelnen Elemente kann zwischen verkürzter und detailierter Anzeige umgeschaltet werden.

Bei einem „exklusiven“ Akkordeon zeigt immer nur ein Element seinen detailierten Inhalt an.

In HTML gibt es dafür das details-Element. Der angekürzte Inhalt muß dabei innerhalb des details-Elements in einem summary-Element stehen also beispielsweise folgendermaßen:

<details>
   <summary>Hinweis zur Verwendung</summary>
   <div>
      <p>Bei der Verwendung müssen Sie folgendes beachten...</p>
   </div>
</details>

Um ein exklusives Akkordeon zu erzeugen, müssen die details-Elemente die zu diesem Akkordeon gehören, ein name-Attribut mit denselben Wert haben.

Zusammen mit den CSS-Klassen aus der Template-Library ergibt sich dann damit folgendes HTML:

<div class="la-accordion la-panel">
   <details name="personen" class="la-padding">
      <summary>Bernhard Riemann</summary>
      <table class="la-detail">
         <tr>
            <th>Geboren</th><td>17.06.1826</td></tr>
            <th>Gestorben</th><td>20.06.1866</td></tr>
         </tr>
      </table>
   </details>
   <details name="personen" class="la-padding">
      <summary>Albert Einstein</summary>
      <table class="la-detail">
         <tr>
            <th>Geboren</th><td>15.03.1879</td></tr>
            <th>Gestorben</th><td>15.04.1955</td></tr>
         </tr>
      </table>
   </details>
   <details name="personen" class="la-padding">
      <summary>Marie Curie</summary>
      <table class="la-detail">
         <tr>
            <th>Geboren</th><td>08.01.1867</td></tr>
            <th>Gestorben</th><td>04.07.1934</td></tr>
         </tr>
      </table>
   </details>
   <details name="personen" class="la-padding">
      <summary>Carl Friedrich Gauß</summary>
      <table class="la-detail">
         <tr>
            <th>Geboren</th><td>30.04.1777</td></tr>
            <th>Gestorben</th><td>23.02.1855</td></tr>
         </tr>
      </table>
   </details>
</div>

Das Ergebnis sieht dann folgendermaßen aus:

Akkordeon

Akkordeon