Kursthemen

Kursübersicht

TOC Funktion (Inhaltsverzeichnis)
Reiter

  • Accordion (FAQ)

    • Nativ mit Bootstrap

    • CONTENT1
      CONTENT2
      CONTENT3

    • Erläuterungen
      • Falls eine Frage aufgeklappt ist: Im Editor zuklappen und speichern lächelnd
      • Zu Beginn aufgeklappt:aria-expanded="false" und class="collapse show"

    • Mit jquery-ui

    • Mit jquery-ui

    • Bemerkung FAQ / Accordion

      Der Atto Editor neigt dazu, unnötige HTML Tags zu setzen und kann so die Struktur des Accordions  zerstören (vor allem, wenn <div> Tags nicht richtig geschlossen werden). Einfügen von komplexeren Texten aus der Zwischenablage wird daher kaum funktionieren. Kleinere Änderungen sollten gehen, solange die Absätze mit den Titeln oder Inhalten nicht ganz gelöscht werden. Grundsätzlich ist sehr empfohlen, in der HTML Ansicht des Editors zu arbeiten.

      Anker verwenden (href="#")
      Wenn beim Verlinken direkt auf einen spezifischen Eintrag gesprungen werden soll, kann ein entsprechender Anker gesetzt werden (z.B. https://moodle0.zhaw.ch/course/view.php?id=29761#moodle_kursanlegen). Dazu das #-Zeichen mit einem Namen für das Ziel ersetzen (keine Leer- oder Sonderzeichen ausser "-" und "_"). Für die Weitergabe des Links mit Anker am einfachsten in der normalen Ansicht mit der rechten Maustaste anklicken und dann «Link-Adresse kopieren» wählen.

      Grundstruktur
      Die FAQ kann um beliebige Einträge ergänzt werden. Dazu den roten Code kopieren und in der HMTL Ansicht des Editors vor  dem letzten schliessenden </div> des Accordions einfügen (unten orange markiert).

      <div id="accordion">
   <h3>Frage 1</h3>
   <div>
      <p>Antwort2</p>
   </div>
   <h3>Frage 2</h3>
   <div>
      <p>Antwort2</p>
   </div>
   <h3>Frage 3</h3>
   <div>
      <p>Antwort 3</p>
   </div>
   <h3>Frage 4</h3>
   <div>
      <p>Antwort 4</p>
   </div>
</div>

    • Example of bootstrap accordion with animated icons.

      Detailed documentation and more examples you can find in our Bootstrap Accordion Docs

      Basic example

      Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
TOC Funktion (Inhaltsverzeichnis)
Reiter