Aufklappboxen erstellen: Unterschied zwischen den Versionen

Version vom 22. März 2018, 12:23 Uhr

Wir bietenen auf dieser Seite vier verschiedene Möglichkeiten von dem Gestalten von Aufklappboxen an. Um ein besseres Verständnis von dem Aussehen zu bekommen klicken Sie bitte hier.

Aufklappbare Boxe bieten sich an, um Informationen, die weniger wichtig sind oder nur für eine bestimmte Zielgruppe interessant sind, zu verbergen. So stehen sie bei bedarf zur Verfügung, nehmen aber nicht von Beginn an Platz auf der Seite ein.

Variante 1:

<keinbr/>
<a class="collapse-button collapsed" role="button" data-toggle="collapse" href="#GibMirEinenEinzigartigenNamen" aria-expanded="false" aria-controls="GibMirEinenEinzigartigenNamen"><span>Titel</span></a>
<div id="GibMirEinenEinzigartigenNamen" class="collapse">
  <div class="collapse-box">
  Ersetzen mit beliebigem Inhalt.
</div>
</div>

Variante 2:

<keinbr/>
<a class="collapse-button collapsed" role="button" data-toggle="collapse" href="#beispiel1" aria-expanded="false" aria-controls="beispiel1"><span>Box mit versteckten Inhalten und einem enorm, also wirklich ganz langen Titel, der zeigt, dass das kein Problem ist mit einem so derart überlangen Titel!</span></a>
<div id="beispiel1" class="collapse">
  <div class="collapse-box">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc nunc ex, viverra nec nulla eget, sollicitudin posuere erat. Pellentesque dictum id felis vitae consequat. Proin volutpat augue nec mattis posuere. Mauris at condimentum ipsum. Nunc facilisis neque diam, sit amet dapibus lacus suscipit vitae. Aliquam sit amet turpis tincidunt risus malesuada ornare ut ut augue. In tempor ex vel turpis ornare pharetra. Etiam mattis metus quam, at pellentesque nisl pretium quis. Vivamus eget sapien at massa eleifend cursus. Morbi ultricies tellus non mauris maximus tristique. Aenean auctor nulla vel magna sagittis blandit. 
</div>
</div>

Variante 3:

<keinbr/>
<a class="collapse-button transparent collapsed" role="button" data-toggle="collapse" href="#beispiel2" aria-expanded="false" aria-controls="beispiel2"><span>Funktioniert mit beliebigen Inhalten und transparentem Knopf</span></a>
 <div id="beispiel2" class="collapse">
       Bild: <image id="89232">
       <a class="collapse-button transparent collapsed" role="button" data-toggle="collapse" href="#beispiel4" aria-expanded="false" aria-controls="beispiel4"><span>Video innerhalb einer anderen Box</span></a>
       <div id="beispiel4" class="collapse">
       <div class="collapse-box">
              <div class="collapse-box">
                    <div class="responsive-media"><iframe width="560" height="315" src="https://www.youtube.com/embed/uIhxFOn1-0U" frameborder="0" allowfullscreen></iframe></div>
              </div>
       </div>
       <a class="collapse-button transparent collapsed" role="button" data-toggle="collapse" href="#beispiel5" aria-expanded="false" aria-controls="beispiel5"><span>Text innerhalb einer anderen Box</span></a>
       <div id="beispiel5" class="collapse">
              <div class="collapse-box">
                    <p>Aenean tempus purus non lacus blandit placerat. Sed a semper sapien. Quisque congue turpis nisl, tempus viverra nisl hendrerit eu. Praesent suscipit elit lacus, in porta felis imperdiet sed. Curabitur in imperdiet nisl. In sit amet aliquet sapien, at accumsan nulla. Fusce condimentum eu erat sit amet pharetra. Aliquam orci velit, tempus a sem et, hendrerit egestas lacus. Phasellus pellentesque magna non lorem pharetra aliquet. Nunc id sodales risus.</p>
              </div>
       </div>
</div>
</div>

Variante 4:

<keinbr/>
<a class="collapse-button transparent collapsed" role="button" data-toggle="collapse" href="#beispiel3" aria-expanded="false" aria-controls="beispiel3"><h2>H2 Überschrift einer komplett transparenten Box</h2></a>
<div id="beispiel3" class="collapse">
  <div class="collapse-box">
       <p>Nulla facilisi. Sed sit amet ex vulputate, lobortis tellus ac, imperdiet orci. Sed luctus tempus velit, in maximus tellus aliquam quis. Suspendisse est orci, maximus in turpis vitae, fermentum laoreet felis. Nam dignissim sapien lorem, eget fringilla turpis interdum vel. Ut urna dolor, viverra sit amet tortor eu, varius porttitor urna. Donec eleifend sollicitudin lorem fringilla pellentesque. Interdum et malesuada fames ac ante ipsum primis in faucibus. Pellentesque odio turpis, vehicula sit amet erat varius, egestas scelerisque nibh. Curabitur faucibus vulputate rutrum.</p>
       <p>Fusce ante urna, molestie non metus a, rutrum hendrerit magna. Nam tempus, sapien a ornare bibendum, leo magna convallis libero, id gravida risus purus non lacus. Mauris massa ligula, varius vel ipsum eu, faucibus pellentesque lorem. Nam eu eros sit amet tortor lobortis auctor. Integer eget euismod eros. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Quisque laoreet at ligula quis euismod. Nam imperdiet ultricies mollis. In luctus efficitur velit, vitae tincidunt tortor ultricies eu. Vestibulum pretium et dui ac dictum. Curabitur porttitor justo augue, sit amet porttitor enim iaculis eu. Suspendisse ac blandit tortor.</p>
  </div>
</div>

Zu beachten ist

Bei der Verwendung von mehreren Boxen auf einer einzelnen Seite, müssen die Bezeichnungen der Boxen im Quelltext jeweils an drei Stellen angepasst werden:

• Einmal im a-Befehl der Teil href="#GibMirEinenEinzigartigenNamen" (# nicht vergessen) und im Teil aria-controls="GibMirEinenEinzigartigenNamen" (das ist für die Barrierefreiheit wichtig, hier kein #).
• Letztlich dann die ID der eigentlichen Box id="GibMirEinenEinzigartigenNamen" (hier auch kein #).

Nur wenn jede Box einen einzigartigen Namen hat, der an den drei genannten Stellen angepasst wurde, wird es funktionieren. Ansonsten weiß der Browser nicht welche Box mit welchem Knopf geöffnet werden soll.