Aufklappboxen erstellen: Unterschied zwischen den Versionen

Version vom 20. Juni 2023, 15:42 Uhr

►► Für eine vereinfachte Erstellung der meist genutzten Varianten der Aufklappboxen steht eine Editierhilfe zur Verfügung.

Wir bieten auf dieser Seite verschiedene Möglichkeiten an, um Aufklappboxen zu gestalten. Aufklappbare Boxen bieten sich an, um Informationen, die vielleicht nur für eine bestimmte Zielgruppe interessant sind, zunächst zu verbergen. So stehen diese Informationen bei Bedarf zur Verfügung, nehmen aber nicht von Beginn an Platz auf der Seite ein.

Beispielseiten: Varianten 1-3 und Variante 4

Variante 1: Grauer Hintergrund

<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: Transparenter Titel, graue Inhaltsbox

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

Variante 3: Komplett transparente Box

<keinbr/>
<a class="collapse-button transparent collapsed" role="button" data-toggle="collapse" href="#beispiel3" aria-expanded="false" aria-controls="beispiel3"><span>Titel</span></a>
<div id="beispiel3" class="collapse">
  <div class="collapse-box transparent">
       <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>

Variante 4: alternatives Design (Beispiel)

Für ein schlankeres Design der Aufklappbox fügen Sie folgende Zeile zusätzlich zu einem der oben genannten HTML-Codes auf der Seite ein:

<link rel="stylesheet" href="https://www.uni-goettingen.de/storage/userdata/CSS/aufklapp-box.css">

Zu beachten ist

Wenn Sie mehrere Boxen auf einer einzelnen Seite verwenden, 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, funktioniert die Box. Wird der einzigartige Name an diesen drei Stellen nicht angepasst, weiß der Browser nicht, welche Box mit welchem Knopf geöffnet werden soll.

Beispiele für besondere Inhaltstypen

Beispiel mit verschiedenen Inhalten: Bilder, Videos, verschachtelte Aufklappboxen

<keinbr/>
<a class="collapse-button transparent collapsed" role="button" data-toggle="collapse" href="#beispiel2" aria-expanded="false" aria-controls="beispiel2"><span>Transparenter Titel – Bsp. mit verschiedenen Inhalten</span></a>
 <div id="beispiel2" class="collapse">
       Bild:<br/><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">
                    <iframe width="100%" src="https://www.youtube.com/embed/uIhxFOn1-0U" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
              </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>

Box mit h2-Überschrift als Titel

<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">
  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>

Aufklappboxen mit automatischer Schließfunktion

Ein Beispiel für diese Funktion finden sie hier. Um diesen Effekt zu erreichen müssen sie um alle ihre Boxen den div-container

<div class="panel-group" id="accordion"> Hier stehen alle Boxen </div>

legen. Um jede Box einzeln muss

<div class="panel panel-default" style="border:none"> Hier kommt eine Box alleine hin </div>

gelegt werden. In den a-container muss noch folgender Befehl geschrieben werden:

<a data-parent="#accordion"> </a>

Der Code für das obige Beispiel ist folgender:

 <keinbr>
                             <div class="panel-group" id="accordion">
                             	<div class="panel panel-default" style="border:none">
                                     <a class="collapse-button collapsed" data-parent="#accordion" role="button" data-toggle="collapse" href="#before" aria-expanded="false" aria-controls="before">
                             		<span>Überschrift 1</span>
                             		</a>
                             		<div id="before" class="collapse">
                             			<div class="collapse-box transparent">
                             			Huhu ich bin ein Text
                             			</div>
                             		</div>
                             	</div>
                               
                              
                             
                             	<div class="panel panel-default" style="border:none">
                             		<a class="collapse-button collapsed" data-parent="#accordion" role="button" data-toggle="collapse" href="#after" aria-expanded="false" aria-controls="after">
                             		<span>Überschrift 2</span>
                             		</a>
                             		<div id="after" class="collapse">
                             			<div class="collapse-box transparent">
                             			Nochmal ein text
                             			</div>
                             		</div>
                             	</div>
                             
                             
                             	<div class="panel panel-default" style="border:none">
                                     <a class="collapse-button collapsed" data-parent="#accordion" role="button" data-toggle="collapse" href="#during" aria-expanded="false" aria-controls="during">
                             		<span>Überschrift 3</span>
                             		</a>
                             		<div id="during" class="collapse">
                             			<div class="collapse-box transparent">
                             	         Ich bin auch noch hier. 
                             			</div>
                             		</div>
                             	</div>
                               
                                 <div class="panel panel-default" style="border:none">
                                     <a class="collapse-button collapsed" data-parent="#accordion" role="button" data-toggle="collapse" href="#finish" aria-expanded="false" aria-controls="finish">
                             		<span>Überschrift 4</span>
                             		</a>
                             		<div id="finish" class="collapse">
                             			<div class="collapse-box transparent">
                             			Schaut sich das noch jemand an? 
                             			</div>
                             		</div>
                             	</div>
                             </div>