Aufklappboxen erstellen: Unterschied zwischen den Versionen

Version vom 14. Februar 2019, 11:36 Uhr

Wir bieten auf dieser Seite vier verschiedene Möglichkeiten an, um Aufklappboxen zu gestalten. Um ein besseres Verständnis vom jeweiligen Aussehen zu bekommen, klicken sie bitte hier. Eine fünfte Variante ist noch hier zu finden.

Aufklappbare Boxe 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.

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>

Variante 5:

<keinbr>
<a class="collapse-button collapsed" 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>

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.

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 insgesamt den div-container

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

legen. Um jede Box einzelnd wiederrum 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>