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