Wie baue ich ein jQuery Accordion in meine Webseite ein

von | Mai 23, 2022 | Allgemein | 0 Kommentare

Ihr habt euch sicher schon gefragt, wie man so ein Element einbauen kann, wo die Tabs versteckt sind und erst auftauchen wenn man darauf klickt. Heute möchte ich euch zeigen wie man solche Accordion Effekte einbauen kann.

Das schöne ist, mit jQuery hat man alles bereits eingebaut und muss gar nicht mal so viel kochen bevor es sauber läuft 🙂

Video

JS Links

Denkt daran, wenn ihr im DSGVO Bereich lebt, dann müsst ihr diese Files herunterladen und innerhalb eurer Webseite verlinken. Wenn ihr das nicht müsst, dann könnt ihr die Links in einem CDN Netzwerk auch finden wie zb hier: https://cdnjs.com/libraries. Dann muss man nämlich nichts herunterladen und kann diese Daten auslagern.

1
2
3
4
5
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.js" integrity="sha512-n/4gHW3atM3QqRcbCn6ewmpxcLAHGaDjpEBu4xZd47N0W2oQ+6q7oc3PXstrJYXcbNU1OHdQ1T7pAP+gi5Yu8g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js" integrity="sha512-uto9mlQzrs59VwILcLiRYeLKPPbS/bT71da/OEBYEwcdNUk8jYIy+D176RYoop1Da+f9mvkYrmj5MCLZWEtQuA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" integrity="sha512-aOG0c6nPNzGk+5zjwyJaoRUgCdOrfSDhmMID2u4+OIslr0GjpLKo7Xm0Ao3xmpM4T8AmIouRkqwj1nrdVsLKEQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />

HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
    <div id="accordion">
        <h2>Demo1</h2>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti, exercitationem harum porro odio, repudiandae qui distinctio aperiam quibusdam similique vel non voluptates quo dolores! Doloribus natus libero dignissimos. Magni, quae!</p>
 
        <h2>Demo2</h2>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti, exercitationem harum porro odio, repudiandae qui distinctio aperiam quibusdam similique vel non voluptates quo dolores! Doloribus natus libero dignissimos. Magni, quae!</p>
 
        <h2>Demo3</h2>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti, exercitationem harum porro odio, repudiandae qui distinctio aperiam quibusdam similique vel non voluptates quo dolores! Doloribus natus libero dignissimos. Magni, quae! Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti, exercitationem harum porro odio, repudiandae qui distinctio aperiam quibusdam similique vel non voluptates quo dolores! Doloribus natus libero dignissimos. Magni, quae!Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti, exercitationem harum porro odio, repudiandae qui distinctio aperiam quibusdam similique vel non voluptates quo dolores! Doloribus natus libero dignissimos. Magni, quae!</p>
 
        <h2>Demo4</h2>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti, exercitationem harum porro odio, repudiandae qui distinctio aperiam quibusdam similique vel non voluptates quo dolores! Doloribus natus libero dignissimos. Magni, quae! Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti, exercitationem harum porro odio, repudiandae qui distinctio aperiam quibusdam similique vel non voluptates quo dolores! Doloribus natus libero dignissimos. Magni, quae!</p>
    </div>

jQuery Befehle

Hier findet ihr übrigens noch die gesamte API Dokumentation vom jQuery Accordion

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<script>
$('#accordion').accordion({
    collapsible: true,
    active: 1,
    heightStyle: "content",
    icons: {
        "header": "ui-icon-triangle-1-e",
        "activeHeader": "ui-icon-arrow-4"
    }
 
 
});
 
</script>




0 Kommentare

Einen Kommentar abschicken

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

WordPress

Allgemein

Technik

Design

Konzept

WordPress Plugins

Interessantes

Vermarktung