Section outline

    • Text 1

      Text 2

      Text 3

      Text 4

    • Hinweis:

      Zur Verwendung des Codes bitte den nachfolgenden Code komplett markieren und in die Textfeld-Aktivität einfügen.
      <div class="container mt-5">
      <div id="accordion">
      <!-- Erstes Accordion -->
      <div class="card">
      <div id="headingF1" class="card-header">
      <h4 class="mb-0"><button class="btn btn-link btn-block text-left collapsed" style="font-size: 1.8rem; color: #c7105c;" type="button" data-toggle="collapse" data-target="#collapseF1" aria-expanded="false" aria-controls="collapseF1"> <!-- Schriftgröße und Farbe für Titel 1 --> <img class="img-responsive" src="https://lehrportal.uni-kassel.de/pluginfile.php/10186/mod_label/intro/Icon_ausklappen-removebg-preview%20%281%29.png" alt="Icon_ausklappen" width="18" height="18">  Titel 1 </button></h4>
      </div>
      <div id="collapseF1" class="collapse show" aria-labelledby="headingF1" data-parent="#accordion">
      <div class="card-body">
      <h5><span style="font-weight: normal;">Text 1</span></h5>
      </div>
      </div>
      </div>
      <!-- Zweites Accordion -->
      <div class="card">
      <div id="headingF2" class="card-header">
      <h4 class="mb-0"><button class="btn btn-link btn-block text-left collapsed" style="font-size: 1.8rem; color: #eac372;" type="button" data-toggle="collapse" data-target="#collapseF2" aria-expanded="false" aria-controls="collapseF2"> <!-- Schriftgröße und Farbe für Titel 2 --> <img class="img-responsive" src="https://lehrportal.uni-kassel.de/pluginfile.php/10186/mod_label/intro/Icon_ausklappen-removebg-preview%20%281%29.png" alt="Icon_ausklappen" width="18" height="18">  Titel 2 </button></h4>
      </div>
      <div id="collapseF2" class="collapse" aria-labelledby="headingF2" data-parent="#accordion">
      <div class="card-body">
      <h5><span style="font-weight: normal;">Text 2</span></h5>
      </div>
      </div>
      </div>
      <!-- Drittes Accordion -->
      <div class="card">
      <div id="headingF3" class="card-header">
      <h4 class="mb-0"><button class="btn btn-link btn-block text-left collapsed" style="font-size: 1.8rem; color: #4aac96;" type="button" data-toggle="collapse" data-target="#collapseF3" aria-expanded="false" aria-controls="collapseF3"> <!-- Schriftgröße und Farbe für Titel 3 --> <img class="img-responsive" src="https://lehrportal.uni-kassel.de/pluginfile.php/10186/mod_label/intro/Icon_ausklappen-removebg-preview%20%281%29.png" alt="Icon_ausklappen" width="18" height="18">  Titel 3 </button></h4>
      </div>
      <div id="collapseF3" class="collapse" aria-labelledby="headingF3" data-parent="#accordion">
      <div class="card-body">
      <h5><span style="font-weight: normal;">Text 3</span></h5>
      </div>
      </div>
      </div>
      <!-- Viertes Accordion -->
      <div class="card">
      <div id="headingF4" class="card-header">
      <h4 class="mb-0"><button class="btn btn-link btn-block text-left collapsed" style="font-size: 1.8rem; color: #5095c8;" type="button" data-toggle="collapse" data-target="#collapseF4" aria-expanded="false" aria-controls="collapseF4"> <!-- Schriftgröße und Farbe für Titel 4 --> <img class="img-responsive" src="https://lehrportal.uni-kassel.de/pluginfile.php/10186/mod_label/intro/Icon_ausklappen-removebg-preview%20%281%29.png" alt="Icon_ausklappen" width="18" height="18">  Titel 4 </button></h4>
      </div>
      <div id="collapseF4" class="collapse" aria-labelledby="headingF4" data-parent="#accordion">
      <div class="card-body">
      <h5><span style="font-weight: normal;">Text 4</span></h5>
      </div>
      </div>
      </div>
      </div>
      </div>

    • Hinweis:

      Zur Verwendung des Codes bitte den nachfolgenden Code komplett markieren und in die Textfeld-Aktivität einfügen.
      <div class="accordion" id="accordionExample">
          <div class="card">
              <div class="card-header" id="heading11a">
                  <h2 class="mb-0">
                      <button class="btn btn-link btn-block text-left collapsed" type="button" data-toggle="collapse" data-target="#collapse11a" aria-expanded="false" aria-controls="collapse11a">
               <img src="https://lehrportal.uni-kassel.de/pluginfile.php/10186/mod_label/intro/Icon_ausklappen-removebg-preview%20%281%29.png" alt="Icon_ausklappen" class="img-responsive atto_image_button_text-bottom" width="18" height="18">Test PDF ansehen/herunterladen
             </button>
                  </h2>
              </div>
              <div id="collapse11a" class="collapse" aria-labelledby="heading11a" data-parent="#accordionExample" style="">
                  <div class="card-body">
                      <center><iframe src="https://lehrportal.uni-kassel.de/pluginfile.php/9750/mod_resource/content/1/Lorem_ipsum.pdf" style="width: 100%; height: 800px;" quality="high" type="application/pdf"></iframe></center>
                  </div>
              </div>
          </div>
      </div>

    • Hinweis zum Code

      Alle Accordions klappen sich auf, obwohl Sie nur eines angeklickt haben?

      Dies tritt auf, wenn Sie mehrere Accordions im Kurs verwenden. Um zu vermeiden, dass alle bei einem klick aufklappen, sollte die Nummerierung im Code für jedes verwendete Accordion unterschiedlich gewählt werden!

      Im nachfolgenden Beispiel haben wir die erforderliche Nummerierung an 5 Stellen exemplarisch hervorgehoben.