GESIS Leibniz-Institut für Sozialwissenschaften: Homepage aufrufen
GESIS Leibniz-Institut für Sozialwissenschaften: Homepage aufrufen
Styleguide

Widget Akkordeon

HTML Basis Syntax 

           <!-- Widget accordion Setup -->
            <details> 
            <!-- add attribute for inital open: <details open="true"> -->
              <summary> 
                <!-- Title Area -->
              </summary>

              <div> <!--  Content Wrapper-->
                <!--  Use minimal Clean Syntax widthout div Wrapper -->
              </div>
             </details>

HTML and Beispiel Content

Es ist wichtig, die grundlegende Syntax in der "Content Area" zu verwenden. Auf zusätzliche div-Elemente kann verzichtet werden.

           <!-- Widget accordion Setup -->
            <details>
              <summary>
                1. Title Text als Teaser oder Überschrift
              </summary>

              <div>
                <section>
                  <h3> Headline im Content </h3>
                  <p> Ut wisi enim ad minim veniam, quis nostrud exerci tation
                    ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo
                    consequat. Duis autem vel eum iriure dolor in hendrerit in
                    vulputate velit esse molestie consequat, vel illum dolore eu
                    feugiat nulla facilisis at vero eros et accumsan et iusto odio
                    dignissim qui blandit praesent luptatum zzril delenit augue duis
                    dolore te feugait nulla facilisi.
                  </p>
                  <ul>
                   <li>Nam liber tempor</li>
                   <li>cum soluta nobis</li>
                   <li>eleifend option</li>
                   <li>congue nihil imperdiet doming</li>
                   <li>id quod mazim</li>
                   <li>placerat facer possim assum. Lorem ipsum dolor</li>
                   <li>sit amet, consectetuer</li>
                   <li>adipiscing elit, sed diam</li>
                   <li>nonummy nibh euismod</li>
                  </ul>
                  ...
                </section>

                <!--  Next Content Section -->
                <section>
                  <h3> Headline im Content </h3>
                  <p> Duis autem vel eum iriure dolor in hendrerit in
                    vulputate velit esse molestie consequat, vel illum dolore eu
                    feugiat nulla facilisis at vero eros et accumsan et iusto odio
                    dignissim qui blandit praesent luptatum zzril delenit augue duis
                    dolore te feugait nulla facilisi.
                  </p>
                  ...
                </section>

                <!--  END of Content Area -->
                </div>
             </details>

Preview

1. Title Text als Teaser oder Überschrift

Headline im Content

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

  • Nam liber tempor
  • cum soluta nobis
  • eleifend option
  • congue nihil imperdiet doming
  • id quod mazim
  • placerat facer possim assum. Lorem ipsum dolor
  • sit amet, consectetuer
  • adipiscing elit, sed diam
  • nonummy nibh euismod

Headline im Content

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.