Aufklappboxen erstellen: Unterschied zwischen den Versionen

Aus GCMS Hilfe
Wechseln zu: Navigation, Suche
 
(35 dazwischenliegende Versionen desselben Benutzers werden nicht angezeigt)
Zeile 1: Zeile 1:
−
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 [http://www.uni-goettingen.de/en/verschieden+gestaltungsm%c3%b6glichkeiten/582022.html hier]. Eine fünfte Variante ist noch [http://www.uni-goettingen.de/en/verschieden+gestaltungsm%C3%B6glichkeiten/603152.html hier] zu finden. 
+
<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 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.
+
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: Grauer Hintergrund
+
'''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 11: Zeile 18:
 
   <nowiki></div></nowiki>
 
   <nowiki></div></nowiki>
 
  <nowiki></div></nowiki>
 
  <nowiki></div></nowiki>
−
Variante 2: Grauer Hintergrund – Bsp. mit langem Titel
+
 
 +
 
 +
 
 +
===== Variante 2: Transparenter Titel, graue Inhaltsbox =====
 
  <keinbr/>
 
  <keinbr/>
−
  <nowiki><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></nowiki><nowiki></a></nowiki>
+
  <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="beispiel1" class="collapse"></nowiki>
+
  <nowiki><div id="beispiel2" 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.  
+
   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 3: Transparenter Titel – Bsp. mit verschiedenen Inhalten
+
 
 +
 
 +
 
 +
===== 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>Transparenter Titel – Bsp. mit verschiedenen Inhalten</span></nowiki><nowiki></a></nowiki>
 
  <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 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>
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>
−
<nowiki></div></nowiki>
+
 
−
Variante 4: Komplett transparente Box
+
 
 +
 
 +
===== 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 transparent"></nowiki>
+
   <nowiki><div class="collapse-box"></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>
+
  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><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>
 
  <nowiki></div></nowiki>
−
Variante 5: neues Design
+
 
−
<nowiki><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></nowiki>
 
−
Nur bei dem fünften Design ist es noch notwendig folgende style Befehle auf der Seite einzubinden. Hierzu erstellen sie einfach ein neues Inhaltselement GCMS-Text und kopieren den Code rein:
 
−
<nowiki><keinbr>
 
−
  <style>
 
−
  #team-search-results {
 
−
  margin-top: 40px;
 
−
  margin-bottom: 40px;
 
−
  }
 
−
 
 
−
  .results-loading {
 
−
  text-align: center;
 
−
  }
 
−
 
 
−
  .input-group-addon {
 
−
  background-color: #13306a;
 
−
  border-color: rgba(0,0,0,.1);
 
−
  color: #fff;
 
−
  }
 
−
 
 
−
  .name {
 
−
  font-size:120%;
 
−
  color: #777;
 
−
  }
 
−
 
 
−
  #main a.collapse-button, #main a.collapse-button:visited, #main a.collapse-button:active, #main a.collapse-button:focus, #main a.collapse-button:hover {
 
−
  border-bottom: 1px dotted #153D7C;
 
−
  color: #153D7C;
 
−
  background: none;
 
−
  font-size: 21px;
 
−
  }
 
−
 
 
−
  #main a.collapse-button::before {
 
−
  color: #153D7C;
 
−
  background: none;
 
−
  }
 
−
 
 
−
  .position-relative {
 
−
  position: relative;
 
−
  }
 
−
 
 
−
 
 
−
  #main .btn, #main .btn:visited {
 
−
  color: #fff; }
 
−
 
 
−
 
 
−
  #main .btn-primary, #main .btn-primary:visited {
 
−
  background-color: #337ab7;
 
−
  border-color: rgba(0,0,0,.1);
 
−
  }
 
−
 
 
−
  #main .btn:hover, #main .btn:active, #main .btn:focus {
 
−
  color: #fff;
 
−
  }
 
−
 
 
−
  #main .btn-primary:hover, #main .btn-primary:active, #main .btn-primary:focus {
 
−
  background-color: #13306a;
 
−
  }
 
−
 
 
−
  #main .btn-contact {
 
−
  position: absolute;
 
−
  background-color: #f2f0e8;
 
−
  color: #4d9cc2;
 
−
  border-radius: 50%;
 
−
  width: 38px;
 
−
  height: 38px;
 
−
  padding: 5px 10px;
 
−
  display: block;
 
−
  left: 63%;
 
−
  bottom: 6px;
 
−
  font-size: 18px;
 
−
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
 
−
  }
 
−
 
 
−
  #page-content article {
 
−
  text-align: left;
 
−
  }
 
−
 
 
−
  .contact-footer {
 
−
  margin-top: 20px;
 
−
  }
 
−
 
 
−
  .col-xs-3, .col-xs-9, .col-md-2, .col-md-10 {
 
−
  padding-left: 8px;
 
−
  padding-right: 8px;
 
−
  }
 
−
 
 
−
  @media only screen and (max-width: 991px) {
 
−
  .col-md-6 ~ .col-md-6 {
 
−
  margin-top: 20px;
 
−
  }
 
−
  }
 
−
 
 
−
  article .row ~ .row {
 
−
  border-top: 1px dotted #4a4949;
 
−
  padding-top: 10px;
 
−
  margin-top: 10px;
 
−
  }
 
−
 
 
−
  .collapse-box .row {
 
−
  margin-right: -5px;
 
−
  margin-left: -5px;
 
−
  }
 
−
 
 
−
  aside.affix.col-sm-4 {
 
−
  position: static;
 
−
  }
 
−
 
 
−
  @media (max-width: 767px) {
 
−
  aside.affix {
 
−
  position: static;
 
−
  display: none;
 
−
  }
 
−
  }
 
−
  </style></nowiki>
 
−
== 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 ==
 
== 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 insgesamt den div-container
+
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 sind alle Boxen drinne </div></nowiki></code>
+
<code><nowiki><div class="panel-group" id="accordion"> Hier stehen alle Boxen </div></nowiki></code>
  
−
legen. Um jede Box einzelnd wiederrum muss
+
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>
 
<code><nowiki><div class="panel panel-default" style="border:none"> Hier kommt eine Box alleine hin </div></nowiki></code>
Zeile 192: Zeile 108:
 
Der Code für das obige Beispiel ist folgender:
 
Der Code für das obige Beispiel ist folgender:
 
  <nowiki> <keinbr>
 
  <nowiki> <keinbr>
−
      <div class="panel-group" id="accordion">
+
                            <div class="panel-group" id="accordion">
−
      <div class="panel panel-default" style="border:none">
+
                            <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">
+
                                    <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>
+
                            <span>Überschrift 1</span>
−
      </a>
+
                            </a>
−
      <div id="before" class="collapse">
+
                            <div id="before" class="collapse">
−
      <div class="collapse-box transparent">
+
                            <div class="collapse-box transparent">
−
      Huhu ich bin ein Text
+
                            Huhu ich bin ein Text
−
      </div>
+
                            </div>
−
      </div>
+
                            </div>
−
      </div>
+
                            </div>
−
       
+
                             
−
     
+
                             
−
     
+
                           
−
      <div class="panel panel-default" style="border:none">
+
                            <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">
+
                            <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>
+
                            <span>Überschrift 2</span>
−
      </a>
+
                            </a>
−
      <div id="after" class="collapse">
+
                            <div id="after" class="collapse">
−
      <div class="collapse-box transparent">
+
                            <div class="collapse-box transparent">
−
      Nochmal ein text
+
                            Nochmal ein text
−
      </div>
+
                            </div>
−
      </div>
+
                            </div>
−
      </div>
+
                            </div>
−
     
+
                           
−
     
+
                           
−
      <div class="panel panel-default" style="border:none">
+
                            <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">
+
                                    <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>
+
                            <span>Überschrift 3</span>
−
      </a>
+
                            </a>
−
      <div id="during" class="collapse">
+
                            <div id="during" class="collapse">
−
      <div class="collapse-box transparent">
+
                            <div class="collapse-box transparent">
−
              Ich bin auch noch hier.  
+
                                    Ich bin auch noch hier.  
−
      </div>
+
                            </div>
−
      </div>
+
                            </div>
−
      </div>
+
                            </div>
−
       
+
                             
−
          <div class="panel panel-default" style="border:none">
+
                                <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">
+
                                    <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>
+
                            <span>Überschrift 4</span>
−
      </a>
+
                            </a>
−
      <div id="finish" class="collapse">
+
                            <div id="finish" class="collapse">
−
      <div class="collapse-box transparent">
+
                            <div class="collapse-box transparent">
−
      Schaut sich das noch jemand an?  
+
                            Schaut sich das noch jemand an?  
−
      </div>
+
                            </div>
−
      </div>
+
                            </div>
−
      </div>
+
                            </div>
−
      </div> </nowiki>
+
                            </div> </nowiki>
 +
__INHALTSVERZEICHNIS_ERZWINGEN__

Aktuelle Version vom 12. Januar 2024, 14:11 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>
Abgerufen von „http://gcms-hilfe.uni-goettingen.de/index.php?title=Aufklappboxen_erstellen&oldid=1363“