Aufklappboxen erstellen: Unterschied zwischen den Versionen
Aus GCMS Hilfe
| (45 dazwischenliegende Versionen desselben Benutzers werden nicht angezeigt) | |||
| Zeile 1: | Zeile 1: | ||
| − | + | <br><br><br> | |
| + | '''[https://www.uni-goettingen.de/de/646874.html ►► Für eine vereinfachte Erstellung der meist genutzten Varianten der Aufklappboxen <span style="background-color:yellow;">steht eine Editierhilfe zur Verfügung.</span>]''' | ||
| + | <br><br><br> | ||
| − | Aufklappbare | + | 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. | ||
| − | Variante 1: | + | '''Beispielseiten: [http://www.uni-goettingen.de/en/verschieden+gestaltungsm%c3%b6glichkeiten/582022.html Varianten 1-3] und [http://www.uni-goettingen.de/en/verschieden+gestaltungsm%C3%B6glichkeiten/603152.html Variante 4]''' |
| + | |||
| + | |||
| + | |||
| + | ===== Variante 1: Grauer Hintergrund ===== | ||
<keinbr/> | <keinbr/> | ||
<nowiki><a class="collapse-button collapsed" role="button" data-toggle="collapse" href="#GibMirEinenEinzigartigenNamen" aria-expanded="false" aria-controls="GibMirEinenEinzigartigenNamen"><span>Titel</span></nowiki><nowiki></a></nowiki> | <nowiki><a class="collapse-button collapsed" role="button" data-toggle="collapse" href="#GibMirEinenEinzigartigenNamen" aria-expanded="false" aria-controls="GibMirEinenEinzigartigenNamen"><span>Titel</span></nowiki><nowiki></a></nowiki> | ||
| Zeile 9: | Zeile 16: | ||
<nowiki><div class="collapse-box"></nowiki> | <nowiki><div class="collapse-box"></nowiki> | ||
Ersetzen mit beliebigem Inhalt. | Ersetzen mit beliebigem Inhalt. | ||
| + | <nowiki></div></nowiki> | ||
<nowiki></div></nowiki> | <nowiki></div></nowiki> | ||
| − | + | ||
| − | Variante 2: | + | |
| + | |||
| + | ===== Variante 2: Transparenter Titel, graue Inhaltsbox ===== | ||
<keinbr/> | <keinbr/> | ||
| − | <nowiki><a class="collapse-button collapsed" role="button" data-toggle="collapse" href="# | + | <nowiki><a class="collapse-button transparent collapsed" role="button" data-toggle="collapse" href="#beispiel2" aria-expanded="false" aria-controls="beispiel2"><span>Titel</span></nowiki><nowiki></a></nowiki> |
| − | <nowiki><div id=" | + | <nowiki><div id="beispiel2" class="collapse"></nowiki> |
<nowiki><div class="collapse-box"></nowiki> | <nowiki><div class="collapse-box"></nowiki> | ||
| − | + | Ersetzen mit beliebigem Inhalt. | |
| + | <nowiki></div></nowiki> | ||
<nowiki></div></nowiki> | <nowiki></div></nowiki> | ||
| + | |||
| + | |||
| + | |||
| + | ===== Variante 3: Komplett transparente Box ===== | ||
| + | <keinbr/> | ||
| + | <nowiki><a class="collapse-button transparent collapsed" role="button" data-toggle="collapse" href="#beispiel3" aria-expanded="false" aria-controls="beispiel3"><span>Titel</span></nowiki><nowiki></a></nowiki> | ||
| + | <nowiki><div id="beispiel3" class="collapse"></nowiki> | ||
| + | <nowiki><div class="collapse-box transparent"></nowiki> | ||
| + | <nowiki><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></nowiki> | ||
| + | <nowiki><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></nowiki> | ||
| + | <nowiki></div></nowiki> | ||
<nowiki></div></nowiki> | <nowiki></div></nowiki> | ||
| − | Variante | + | |
| + | |||
| + | |||
| + | ===== Variante 4: alternatives Design ([http://www.uni-goettingen.de/en/verschieden+gestaltungsm%C3%B6glichkeiten/603152.html 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/> | <keinbr/> | ||
| − | <nowiki><a class="collapse-button transparent collapsed" role="button" data-toggle="collapse" href="#beispiel2" aria-expanded="false" aria-controls="beispiel2"><span> | + | <nowiki><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></nowiki><nowiki></a></nowiki> |
<nowiki><div id="beispiel2" class="collapse"></nowiki> | <nowiki><div id="beispiel2" class="collapse"></nowiki> | ||
| − | Bild: <image id="89232"> | + | Bild:<nowiki><br/></nowiki><image id="89232"> |
<nowiki><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></nowiki><nowiki></a></nowiki> | <nowiki><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></nowiki><nowiki></a></nowiki> | ||
| − | + | <nowiki><div id="beispiel4" class="collapse"></nowiki> | |
<nowiki><div class="collapse-box"></nowiki> | <nowiki><div class="collapse-box"></nowiki> | ||
<nowiki><div class="collapse-box"></nowiki> | <nowiki><div class="collapse-box"></nowiki> | ||
| − | + | <iframe width="100%" src="https://www.youtube.com/embed/uIhxFOn1-0U" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe> | |
<nowiki></div></nowiki> | <nowiki></div></nowiki> | ||
<nowiki></div></nowiki> | <nowiki></div></nowiki> | ||
| Zeile 37: | Zeile 77: | ||
<nowiki></div></nowiki> | <nowiki></div></nowiki> | ||
<nowiki></div></nowiki> | <nowiki></div></nowiki> | ||
| + | <nowiki></div></nowiki> | ||
<nowiki></div></nowiki> | <nowiki></div></nowiki> | ||
| − | + | ||
| − | + | ||
| + | |||
| + | ===== Box mit h2-Überschrift als Titel ===== | ||
<keinbr/> | <keinbr/> | ||
<nowiki><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></nowiki><nowiki></a></nowiki> | <nowiki><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></nowiki><nowiki></a></nowiki> | ||
<nowiki><div id="beispiel3" class="collapse"></nowiki> | <nowiki><div id="beispiel3" class="collapse"></nowiki> | ||
<nowiki><div class="collapse-box"></nowiki> | <nowiki><div class="collapse-box"></nowiki> | ||
| − | + | 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. | |
| − | |||
<nowiki></div></nowiki> | <nowiki></div></nowiki> | ||
<nowiki></div></nowiki> | <nowiki></div></nowiki> | ||
| − | == | + | |
| − | + | ||
| − | + | == Aufklappboxen mit automatischer Schließfunktion == | |
| − | + | Ein Beispiel für diese Funktion finden sie [http://www.uni-goettingen.de/de/promovierende/602955.html hier]. Um diesen Effekt zu erreichen müssen sie um alle ihre Boxen den div-container | |
| − | + | ||
| + | <code><nowiki><div class="panel-group" id="accordion"> Hier stehen alle Boxen </div></nowiki></code> | ||
| + | |||
| + | legen. Um jede Box einzeln muss | ||
| + | |||
| + | <code><nowiki><div class="panel panel-default" style="border:none"> Hier kommt eine Box alleine hin </div></nowiki></code> | ||
| + | |||
| + | gelegt werden. In den a-container muss noch folgender Befehl geschrieben werden: | ||
| + | |||
| + | <code><a data-parent="#accordion"> </a></code> | ||
| + | |||
| + | Der Code für das obige Beispiel ist folgender: | ||
| + | <nowiki> <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> </nowiki> | ||
| + | __INHALTSVERZEICHNIS_ERZWINGEN__ | ||
Aktuelle Version vom 12. Januar 2024, 14:11 Uhr
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
Inhaltsverzeichnis
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>
