Main: .gs-toc

HTML-Besipiel

    <!-- Table of Content -->
       <div class="gs-toc">
        <button
          class="gs-toc-toggle d-lg-none collapsed"
          type="button"
          data-bs-toggle="collapse"
          data-bs-target="#tocContents"
          aria-expanded="false"
          aria-controls="tocContents"
        >
          Table of Content
        </button>
        <strong class="d-none d-lg-block">Table of Content</strong>
        <div class="gs-toc-collapse collapse" id="tocContents">
          <nav id="TableOfContents">
            <ul>
              <li>
                <a href="#erster-abschnitt"
                  data-auto-event-observed="true"
                  class="active">
                Erster Abschnitt
                </a>
                <ul>
                  <li>
                    <a href="#1-zu-beginn-offenes-akkordeon"
                      data-auto-event-observed="true">
                      1. Zu Beginn offenes Akkordeon
                    </a>
                  </li>
                  <li>
                    <a href="#2-beim-start-geschlossenes-akkordeon"
                      data-auto-event-observed="true">
                      2. Beim Start geschlossenes Akkordeon
                    </a>
                  </li>
                  <li>
                    <a  href="#3-duis-attem-vel-eum" 
                        data-auto-event-observed="true">
                        3. Duis autem vel eum
                    </a>
                  </li>
                </ul>
              </li>
              <li>
                <a  href="#weiter-abschnitt" 
                    data-auto-event-observed="true" > 
                    Zweiter Abschnitt
                </a>
                <ul>
                  <li>
                    <a  href="#keine-css-klassen-benoetigt"
                        data-auto-event-observed="true">
                        Keine CSS-Klassen benötigt
                    </a>
                  </li>
                  <li>
                    <a  href="#id-als-anker" 
                        data-auto-event-observed="true">
                        ID als Anker
                    </a>
                  </li>
                  <li>
                    <a  href="#css-klassen-sind-vordefiniert"
                        data-auto-event-observed="true">
                        CSS-Klassen sind vordefiniert
                    </a>
                  </li>
                </ul>
              </li>

              <li>
                <a  href="#zuerst-die-syntax-dann-die-css-klassen"
                    data-auto-event-observed="true">
                    Zuerst die Syntax, dann die CSS-Klassen
                </a>
              </li>
            </ul>
          </nav>
        </div>
      </div>