{"id":111208,"date":"2024-06-02T12:35:00","date_gmt":"2024-06-02T10:35:00","guid":{"rendered":"https:\/\/netzwerk.design\/?p=111208"},"modified":"2026-03-23T21:04:46","modified_gmt":"2026-03-23T20:04:46","slug":"web-accordions-tools-for-layout-and-design","status":"publish","type":"blog","link":"https:\/\/netzwerk.design\/en\/blog\/accordions-webdesign-element-interaktiv\/","title":{"rendered":"Accordions: interactive web design element - applications"},"content":{"rendered":"<p class=\"gb-text\">Accordions are a popular web design element that is often used to organise and display content. In this article, you will learn more about the technical functions of accordions, what they can be used for and what advantages they offer.<\/p>\n\n\n\n<div class=\"gb-element-250a088a alignfull\">\n<h2 id=\"beschreibung-accordions\" class=\"gb-text gb-text-7e88e6fa\">Description Accordions<\/h2>\n\n\n\n<p class=\"gb-text gb-text-4664e30f\">Accordions are interactive elements on a website that make it possible to display content in compact, fold-out sections, which can significantly improve the user-friendliness and design of a website. They typically consist of a title or heading which, when clicked, displays the underlying content. When clicked again, the content is hidden again. This makes it possible to display large amounts of information in a small space and improve the user experience.<\/p>\n<\/div>\n\n\n\n<h3 id=\"technische-funktion-von-accordions\" class=\"gb-text\">Technical function of accordions<\/h3>\n\n\n\n<p class=\"gb-text\">From a technical point of view, accordions are usually implemented using HTML, CSS and JavaScript. A simple accordion consists of:<\/p>\n\n\n\n<ul class=\"wp-block-list normalweight\">\n<li>HTML: Markup that defines the structure of the accordion panels.<\/li>\n\n\n\n<li>CSS: Styles that design the visual appearance of the accordions.<\/li>\n\n\n\n<li>JavaScript: Scripts that control the interactive collapse and expand function.<\/li>\n<\/ul>\n\n\n\n<h3 id=\"wofur-kann-man-accordions-verwenden\" class=\"gb-text\">What can you use accordions for?<\/h3>\n\n\n\n<p class=\"gb-text\">Accordions are versatile and can be useful in various areas of a website:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Quick overview\n<ul class=\"wp-block-list\">\n<li>Accordion headings can be used to provide a quick overview and display details only when required.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>FAQ pages \n<ul class=\"wp-block-list\">\n<li>To present frequently asked questions and their answers in a structured and clear way.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>Product details \n<ul class=\"wp-block-list\">\n<li>To display detailed information on products without overloading the page.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>Tables of contents \n<ul class=\"wp-block-list\">\n<li>For a compact presentation of chapters or sections within a long document.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>User instructions\n<ul class=\"wp-block-list\">\n<li>To clearly present instructions and step-by-step processes.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<h3 id=\"vorteile-des-einsatzes-von-accordions\" class=\"gb-text\">Advantages of using accordions<\/h3>\n\n\n\n<p class=\"gb-text\">The use of Accordions on a website offers numerous advantages:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Space-saving\n<ul class=\"wp-block-list\">\n<li>Accordions make it possible to display large amounts of information in compact form and only show it when required.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>Improved user-friendliness\n<ul class=\"wp-block-list\">\n<li>Users can access the desired information quickly and easily without having to scroll through long texts.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>Structured layout\n<ul class=\"wp-block-list\">\n<li>Accordions help to divide content into logical sections and keep the design of the page tidy.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>Interactivity\n<ul class=\"wp-block-list\">\n<li>Accordions encourage user interactivity and engagement by allowing users to expand and collapse content as required.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>SEO advantages\n<ul class=\"wp-block-list\">\n<li>By using accordions, the content of a page can be better structured, which can have a positive effect on search engine optimisation (SEO).<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<h3 id=\"accordions-mit-standard-onoff-icon\" class=\"gb-text\">Accordions with standard on\/off icon:<\/h3>\n\n\n\n<div class=\"gb-accordion\">\n<div class=\"gb-accordion__item gb-accordion__item-9c37969c\">\n<div role=\"button\" tabindex=\"0\" class=\"gb-accordion__toggle gb-accordion__toggle-54064265\" id=\"gb-accordion-toggle-54064265\">\n<span class=\"gb-text gb-text-089ae43a\">Accordion title<\/span>\n\n\n\n<span class=\"gb-accordion__toggle-icon gb-accordion__toggle-icon-93103db1\"><span class=\"gb-accordion__toggle-icon-open\"><svg aria-hidden=\"true\" viewbox=\"0 0 256 256\"><rect width=\"256\" height=\"256\" fill=\"none\"><\/rect><line x1=\"40\" y1=\"128\" x2=\"216\" y2=\"128\" fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"16\"><\/line><line x1=\"128\" y1=\"40\" x2=\"128\" y2=\"216\" fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"16\"><\/line><\/svg><\/span><span class=\"gb-accordion__toggle-icon-close\"><svg aria-hidden=\"true\" viewbox=\"0 0 256 256\"><rect width=\"256\" height=\"256\" fill=\"none\"><\/rect><line x1=\"40\" y1=\"128\" x2=\"216\" y2=\"128\" fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"16\"><\/line><\/svg><\/span><\/span>\n<\/div>\n\n\n\n<div class=\"gb-accordion__content\" id=\"gb-accordion-content-37d3c886\">\n<div class=\"gb-element-fe708e8c\">\n<p class=\"wp-block-paragraph\">Accordion content<\/p>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<div class=\"gb-accordion__item gb-accordion__item-dd935cfb\">\n<div role=\"button\" tabindex=\"0\" class=\"gb-accordion__toggle gb-accordion__toggle-d08821cd\" id=\"gb-accordion-toggle-d08821cd\">\n<span class=\"gb-text gb-text-9e2455f5\">Accordion title<\/span>\n\n\n\n<span class=\"gb-accordion__toggle-icon gb-accordion__toggle-icon-19c8674a\"><span class=\"gb-accordion__toggle-icon-open\"><svg aria-hidden=\"true\" viewbox=\"0 0 256 256\"><rect width=\"256\" height=\"256\" fill=\"none\"><\/rect><circle cx=\"128\" cy=\"128\" r=\"96\" fill=\"none\" stroke=\"currentColor\" stroke-miterlimit=\"10\" stroke-width=\"16\"><\/circle><line x1=\"88\" y1=\"128\" x2=\"168\" y2=\"128\" fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"16\"><\/line><line x1=\"128\" y1=\"88\" x2=\"128\" y2=\"168\" fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"16\"><\/line><\/svg><\/span><span class=\"gb-accordion__toggle-icon-close\"><svg aria-hidden=\"true\" viewbox=\"0 0 256 256\"><rect width=\"256\" height=\"256\" fill=\"none\"><\/rect><line x1=\"88\" y1=\"128\" x2=\"168\" y2=\"128\" fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"16\"><\/line><circle cx=\"128\" cy=\"128\" r=\"96\" fill=\"none\" stroke=\"currentColor\" stroke-miterlimit=\"10\" stroke-width=\"16\"><\/circle><\/svg><\/span><\/span>\n<\/div>\n\n\n\n<div class=\"gb-accordion__content\" id=\"gb-accordion-content-504d15b1\">\n<div class=\"gb-element-5cc9a51f\">\n<p class=\"wp-block-paragraph\">Accordion content<\/p>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<div class=\"gb-accordion__item gb-accordion__item-5e1ea083\">\n<div role=\"button\" tabindex=\"0\" class=\"gb-accordion__toggle gb-accordion__toggle-5b9a84e8\" id=\"gb-accordion-toggle-5b9a84e8\">\n<span class=\"gb-text gb-text-6c474e11\">Accordion title<\/span>\n\n\n\n<span class=\"gb-accordion__toggle-icon gb-accordion__toggle-icon-b8e02f3f\"><span class=\"gb-accordion__toggle-icon-open\"><svg aria-hidden=\"true\" viewbox=\"0 0 256 256\"><rect width=\"256\" height=\"256\" fill=\"none\"><\/rect><rect x=\"40\" y=\"40\" width=\"176\" height=\"176\" rx=\"8\" fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"16\"><\/rect><line x1=\"88\" y1=\"128\" x2=\"168\" y2=\"128\" fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"16\"><\/line><line x1=\"128\" y1=\"88\" x2=\"128\" y2=\"168\" fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"16\"><\/line><\/svg><\/span><span class=\"gb-accordion__toggle-icon-close\"><svg aria-hidden=\"true\" viewbox=\"0 0 256 256\"><rect width=\"256\" height=\"256\" fill=\"none\"><\/rect><rect x=\"40\" y=\"40\" width=\"176\" height=\"176\" rx=\"8\" fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"16\"><\/rect><line x1=\"88\" y1=\"128\" x2=\"168\" y2=\"128\" fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"16\"><\/line><\/svg><\/span><\/span>\n<\/div>\n\n\n\n<div class=\"gb-accordion__content\" id=\"gb-accordion-content-dc0d6dc8\">\n<div class=\"gb-element-2639d30f\">\n<p class=\"wp-block-paragraph\">Accordion content<\/p>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<div class=\"gb-accordion__item gb-accordion__item-00741986\">\n<div role=\"button\" tabindex=\"0\" class=\"gb-accordion__toggle gb-accordion__toggle-040f2398\" id=\"gb-accordion-toggle-040f2398\">\n<span class=\"gb-text gb-text-afa74087\">Accordion title<\/span>\n\n\n\n<span class=\"gb-accordion__toggle-icon gb-accordion__toggle-icon-820caed8\"><span class=\"gb-accordion__toggle-icon-open\"><svg aria-hidden=\"true\" viewbox=\"0 0 256 256\"><rect width=\"256\" height=\"256\" fill=\"none\"><\/rect><polyline points=\"208 96 128 176 48 96\" fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"16\"><\/polyline><\/svg><\/span><span class=\"gb-accordion__toggle-icon-close\"><svg aria-hidden=\"true\" viewbox=\"0 0 256 256\"><rect width=\"256\" height=\"256\" fill=\"none\"><\/rect><polyline points=\"48 160 128 80 208 160\" fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"16\"><\/polyline><\/svg><\/span><\/span>\n<\/div>\n\n\n\n<div class=\"gb-accordion__content\" id=\"gb-accordion-content-59922f87\">\n<div class=\"gb-element-9528f01d\">\n<p class=\"wp-block-paragraph\">Accordion content<\/p>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<div class=\"gb-accordion__item gb-accordion__item-8b62dd02\">\n<div role=\"button\" tabindex=\"0\" class=\"gb-accordion__toggle gb-accordion__toggle-bbea28d9\" id=\"gb-accordion-toggle-bbea28d9\">\n<span class=\"gb-text gb-text-81293345\">Accordion title<\/span>\n\n\n\n<span class=\"gb-accordion__toggle-icon gb-accordion__toggle-icon-955e8b9c\"><span class=\"gb-accordion__toggle-icon-open\"><svg aria-hidden=\"true\" viewbox=\"0 0 256 256\"><rect width=\"256\" height=\"256\" fill=\"none\"><\/rect><circle cx=\"128\" cy=\"128\" r=\"96\" fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"16\"><\/circle><polyline points=\"88 112 128 152 168 112\" fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"16\"><\/polyline><\/svg><\/span><span class=\"gb-accordion__toggle-icon-close\"><svg aria-hidden=\"true\" viewbox=\"0 0 256 256\"><rect width=\"256\" height=\"256\" fill=\"none\"><\/rect><circle cx=\"128\" cy=\"128\" r=\"96\" fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"16\"><\/circle><polyline points=\"88 144 128 104 168 144\" fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"16\"><\/polyline><\/svg><\/span><\/span>\n<\/div>\n\n\n\n<div class=\"gb-accordion__content\" id=\"gb-accordion-content-ab359099\">\n<div class=\"gb-element-a77861c3\">\n<p class=\"wp-block-paragraph\">Accordion content<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<h3 id=\"accordions-mit-animierten-onoff-icon\" class=\"gb-text\">Accordions with animated on\/off icon:<\/h3>\n\n\n\n<div class=\"gb-accordion\">\n<div class=\"gb-accordion__item gb-accordion__item-63a619a0 accordion-90\">\n<div role=\"button\" tabindex=\"0\" class=\"gb-accordion__toggle gb-accordion__toggle-90126ebd\" id=\"gb-accordion-toggle-90126ebd\">\n<span class=\"gb-text gb-text-35f5075a\">Accordion title<\/span>\n\n\n\n<span class=\"gb-accordion__toggle-icon gb-accordion__toggle-icon-5798fe9d\"><span class=\"gb-accordion__toggle-icon-open\"><svg id=\"Ebene_2\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewbox=\"0 0 18.84 18.84\"><g id=\"Layer_1\"><rect width=\"18.84\" height=\"18.84\" style=\"fill:none;\"><\/rect><path d=\"m9.42,10c-.14,0-.26-.05-.36-.14-.1-.1-.14-.21-.14-.36V1.34c0-.14.05-.26.14-.36.1-.1.21-.14.36-.14s.26.05.36.14c.1.1.14.21.14.36v8.15c0,.14-.05.26-.14.36-.1.1-.21.14-.35.14Zm0,8c-1.11,0-2.15-.21-3.12-.63-.97-.42-1.82-.99-2.54-1.71-.72-.73-1.3-1.57-1.71-2.54-.42-.97-.62-2.01-.62-3.12,0-.98.18-1.92.53-2.83.35-.91.85-1.72,1.5-2.44.09-.12.2-.17.34-.16s.26.07.38.18c.1.1.13.21.12.33-.02.13-.07.25-.16.37-.55.63-.97,1.33-1.26,2.12-.29.79-.44,1.6-.44,2.44,0,1.95.68,3.6,2.04,4.96,1.36,1.36,3.01,2.04,4.96,2.04,1.95,0,3.6-.68,4.96-2.04,1.36-1.36,2.04-3.01,2.04-4.96,0-.84-.14-1.65-.43-2.44-.29-.79-.71-1.5-1.27-2.13-.09-.11-.14-.24-.16-.37-.02-.13.02-.24.12-.34.11-.11.23-.17.37-.17.14,0,.25.05.34.17.65.72,1.15,1.54,1.51,2.44.35.9.53,1.85.53,2.83,0,1.11-.21,2.15-.63,3.12s-.99,1.82-1.71,2.54c-.73.72-1.57,1.3-2.54,1.71-.97.42-2.01.63-3.12.63h0Z\"><\/path><\/g><\/svg><\/span><span class=\"gb-accordion__toggle-icon-close\"><svg id=\"Ebene_2\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewbox=\"0 0 18.84 18.84\"><g id=\"Layer_1\"><rect width=\"18.84\" height=\"18.84\" style=\"fill:none;\"><\/rect><path d=\"m9.42,10c-.14,0-.26-.05-.36-.14-.1-.1-.14-.21-.14-.36V1.34c0-.14.05-.26.14-.36.1-.1.21-.14.36-.14s.26.05.36.14c.1.1.14.21.14.36v8.15c0,.14-.05.26-.14.36-.1.1-.21.14-.35.14Zm0,8c-1.11,0-2.15-.21-3.12-.63-.97-.42-1.82-.99-2.54-1.71-.72-.73-1.3-1.57-1.71-2.54-.42-.97-.62-2.01-.62-3.12,0-.98.18-1.92.53-2.83.35-.91.85-1.72,1.5-2.44.09-.12.2-.17.34-.16s.26.07.38.18c.1.1.13.21.12.33-.02.13-.07.25-.16.37-.55.63-.97,1.33-1.26,2.12-.29.79-.44,1.6-.44,2.44,0,1.95.68,3.6,2.04,4.96,1.36,1.36,3.01,2.04,4.96,2.04,1.95,0,3.6-.68,4.96-2.04,1.36-1.36,2.04-3.01,2.04-4.96,0-.84-.14-1.65-.43-2.44-.29-.79-.71-1.5-1.27-2.13-.09-.11-.14-.24-.16-.37-.02-.13.02-.24.12-.34.11-.11.23-.17.37-.17.14,0,.25.05.34.17.65.72,1.15,1.54,1.51,2.44.35.9.53,1.85.53,2.83,0,1.11-.21,2.15-.63,3.12s-.99,1.82-1.71,2.54c-.73.72-1.57,1.3-2.54,1.71-.97.42-2.01.63-3.12.63h0Z\"><\/path><\/g><\/svg><\/span><\/span>\n<\/div>\n\n\n\n<div class=\"gb-accordion__content\" id=\"gb-accordion-content-58370ae8\">\n<div class=\"gb-element-d4c6b3fe\">\n<p class=\"wp-block-paragraph\">Accordion content<\/p>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<div class=\"gb-accordion__item gb-accordion__item-ca46b05c accordion-135\">\n<div role=\"button\" tabindex=\"0\" class=\"gb-accordion__toggle gb-accordion__toggle-40367438\" id=\"gb-accordion-toggle-40367438\">\n<span class=\"gb-text gb-text-69fdf93e\">Accordion title<\/span>\n\n\n\n<span class=\"gb-accordion__toggle-icon gb-accordion__toggle-icon-26a4335d\"><span class=\"gb-accordion__toggle-icon-open\"><svg id=\"Ebene_2\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewbox=\"0 0 29 29\"><g id=\"Layer_1\"><path d=\"m28,13.5h-12.5V1c0-.55-.45-1-1-1s-1,.45-1,1v12.5H1c-.55,0-1,.45-1,1s.45,1,1,1h12.5v12.5c0,.55.45,1,1,1s1-.45,1-1v-12.5h12.5c.55,0,1-.45,1-1s-.45-1-1-1Z\"><\/path><\/g><\/svg><\/span><span class=\"gb-accordion__toggle-icon-close\"><svg id=\"Ebene_2\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewbox=\"0 0 29 29\"><g id=\"Layer_1\"><path d=\"m28,13.5h-12.5V1c0-.55-.45-1-1-1s-1,.45-1,1v12.5H1c-.55,0-1,.45-1,1s.45,1,1,1h12.5v12.5c0,.55.45,1,1,1s1-.45,1-1v-12.5h12.5c.55,0,1-.45,1-1s-.45-1-1-1Z\"><\/path><\/g><\/svg><\/span><\/span>\n<\/div>\n\n\n\n<div class=\"gb-accordion__content\" id=\"gb-accordion-content-07292c6f\">\n<div class=\"gb-element-c388e4d8\">\n<p class=\"wp-block-paragraph\">Accordion content<\/p>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<div class=\"gb-accordion__item gb-accordion__item-7f3d66af accordion-270\">\n<div role=\"button\" tabindex=\"0\" class=\"gb-accordion__toggle gb-accordion__toggle-20e97bc7\" id=\"gb-accordion-toggle-20e97bc7\">\n<span class=\"gb-text gb-text-786dcf15\">Accordion title<\/span>\n\n\n\n<span class=\"gb-accordion__toggle-icon gb-accordion__toggle-icon-9ce66434\"><span class=\"gb-accordion__toggle-icon-open\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"2em\" height=\"2em\" viewbox=\"0 0 256 256\"><path fill=\"currentColor\" d=\"M128 82a46 46 0 1 0 46 46a46.06 46.06 0 0 0-46-46m0 80a34 34 0 1 1 34-34a34 34 0 0 1-34 34m108-54.4a6 6 0 0 0-2.92-4l-30.44-17.38l-.42-.71l-.12-34.31a6 6 0 0 0-2.1-4.56a110.1 110.1 0 0 0-36.07-20.31a6 6 0 0 0-4.84.45l-30.63 17.08h-1l-30.55-17.1a6 6 0 0 0-4.86-.44A109.9 109.9 0 0 0 56 46.68a6 6 0 0 0-2.12 4.55l-.16 34.34c-.14.23-.28.47-.41.71l-30.4 17.29a6 6 0 0 0-2.91 4.05a104.8 104.8 0 0 0 0 40.78a6 6 0 0 0 2.92 4l30.42 17.33l.42.71l.12 34.31a6 6 0 0 0 2.12 4.61a110.1 110.1 0 0 0 36.07 20.31a6 6 0 0 0 4.84-.45l30.61-17.08h1l30.56 17.1a6.1 6.1 0 0 0 2.92.76a5.8 5.8 0 0 0 1.93-.32a109.9 109.9 0 0 0 36-20.36a6 6 0 0 0 2.12-4.55l.16-34.34c.14-.23.28-.47.41-.71l30.42-17.29a6 6 0 0 0 2.92-4.05a104.8 104.8 0 0 0 .04-40.78m-11.25 35.79l-29.43 16.71a6.07 6.07 0 0 0-2.28 2.3c-.59 1-1.21 2.11-1.86 3.14a6 6 0 0 0-.91 3.16l-.16 33.21a98.2 98.2 0 0 1-27.52 15.53L133 200.88a6 6 0 0 0-2.93-.77h-3.88a6 6 0 0 0-3.07.76l-29.67 16.56a98 98 0 0 1-27.56-15.49l-.12-33.17a6 6 0 0 0-.91-3.16c-.64-1-1.27-2.08-1.86-3.14a6 6 0 0 0-2.27-2.3L31.3 143.4a93 93 0 0 1 0-30.79L60.68 95.9A6.07 6.07 0 0 0 63 93.6c.59-1 1.21-2.11 1.86-3.14a6 6 0 0 0 .91-3.16l.16-33.21a98.2 98.2 0 0 1 27.48-15.53L123 55.12a5.8 5.8 0 0 0 3.07.76h3.74a6 6 0 0 0 3.07-.76l29.65-16.56a98 98 0 0 1 27.56 15.49l.12 33.17a6 6 0 0 0 .91 3.16c.64 1 1.27 2.08 1.86 3.14a6 6 0 0 0 2.27 2.3l29.45 16.78a93 93 0 0 1 .03 30.79Z\"><\/path><\/svg><\/span><span class=\"gb-accordion__toggle-icon-close\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"2em\" height=\"2em\" viewbox=\"0 0 256 256\"><path fill=\"currentColor\" d=\"M128 82a46 46 0 1 0 46 46a46.06 46.06 0 0 0-46-46m0 80a34 34 0 1 1 34-34a34 34 0 0 1-34 34m108-54.4a6 6 0 0 0-2.92-4l-30.44-17.38l-.42-.71l-.12-34.31a6 6 0 0 0-2.1-4.56a110.1 110.1 0 0 0-36.07-20.31a6 6 0 0 0-4.84.45l-30.63 17.08h-1l-30.55-17.1a6 6 0 0 0-4.86-.44A109.9 109.9 0 0 0 56 46.68a6 6 0 0 0-2.12 4.55l-.16 34.34c-.14.23-.28.47-.41.71l-30.4 17.29a6 6 0 0 0-2.91 4.05a104.8 104.8 0 0 0 0 40.78a6 6 0 0 0 2.92 4l30.42 17.33l.42.71l.12 34.31a6 6 0 0 0 2.12 4.61a110.1 110.1 0 0 0 36.07 20.31a6 6 0 0 0 4.84-.45l30.61-17.08h1l30.56 17.1a6.1 6.1 0 0 0 2.92.76a5.8 5.8 0 0 0 1.93-.32a109.9 109.9 0 0 0 36-20.36a6 6 0 0 0 2.12-4.55l.16-34.34c.14-.23.28-.47.41-.71l30.42-17.29a6 6 0 0 0 2.92-4.05a104.8 104.8 0 0 0 .04-40.78m-11.25 35.79l-29.43 16.71a6.07 6.07 0 0 0-2.28 2.3c-.59 1-1.21 2.11-1.86 3.14a6 6 0 0 0-.91 3.16l-.16 33.21a98.2 98.2 0 0 1-27.52 15.53L133 200.88a6 6 0 0 0-2.93-.77h-3.88a6 6 0 0 0-3.07.76l-29.67 16.56a98 98 0 0 1-27.56-15.49l-.12-33.17a6 6 0 0 0-.91-3.16c-.64-1-1.27-2.08-1.86-3.14a6 6 0 0 0-2.27-2.3L31.3 143.4a93 93 0 0 1 0-30.79L60.68 95.9A6.07 6.07 0 0 0 63 93.6c.59-1 1.21-2.11 1.86-3.14a6 6 0 0 0 .91-3.16l.16-33.21a98.2 98.2 0 0 1 27.48-15.53L123 55.12a5.8 5.8 0 0 0 3.07.76h3.74a6 6 0 0 0 3.07-.76l29.65-16.56a98 98 0 0 1 27.56 15.49l.12 33.17a6 6 0 0 0 .91 3.16c.64 1 1.27 2.08 1.86 3.14a6 6 0 0 0 2.27 2.3l29.45 16.78a93 93 0 0 1 .03 30.79Z\"><\/path><\/svg><\/span><\/span>\n<\/div>\n\n\n\n<div class=\"gb-accordion__content\" id=\"gb-accordion-content-1ec16b4a\">\n<div class=\"gb-element-66766121\">\n<p class=\"wp-block-paragraph\">Accordion content<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<h2 id=\"fazit\" class=\"gb-text\">Conclusion<\/h2>\n\n\n\n<p class=\"gb-text\">Accordions are a versatile and useful tool for the layout and design of your website. They improve user-friendliness, save space and enable clear structuring of content. Easy to implement and versatile, accordions are an elegant addition to any modern website. If you want to make your website more user-friendly and clearer, you should consider using Accordions.<\/p>","protected":false},"excerpt":{"rendered":"<p>Accordions are a popular web design element that is often used to organise and display content. What advantages do they offer?<\/p>","protected":false},"featured_media":137088,"menu_order":50,"template":"","meta":{"_acf_changed":false,"_seopress_titles_title":"%%post_title%%","_seopress_titles_desc":"Mit Accordions k\u00f6nnen Informationen in einem kompakten und \u00fcbersichtlichen Format dargestellt werden.","_seopress_robots_index":"","_seopress_robots_follow":"","_seopress_robots_imageindex":"","_seopress_robots_snippet":"","_seopress_robots_primary_cat":"","_seopress_robots_breadcrumbs":"","_seopress_robots_freeze_modified_date":"","_seopress_robots_custom_modified_date":"","_seopress_robots_canonical":"","_seopress_social_fb_title":"","_seopress_social_fb_desc":"","_seopress_social_fb_img":"","_seopress_social_fb_img_attachment_id":0,"_seopress_social_fb_img_width":0,"_seopress_social_fb_img_height":0,"_seopress_social_twitter_title":"","_seopress_social_twitter_desc":"","_seopress_social_twitter_img":"","_seopress_social_twitter_img_attachment_id":0,"_seopress_social_twitter_img_width":0,"_seopress_social_twitter_img_height":0,"_seopress_redirections_value":"","_seopress_redirections_enabled":"","_seopress_redirections_enabled_regex":"","_seopress_redirections_logged_status":"both","_seopress_redirections_param":"","_seopress_redirections_type":301,"_seopress_analysis_target_kw":"Accordions","_seopress_news_disabled":"","_seopress_video_disabled":"","_seopress_video":[],"_seopress_pro_schemas_manual":[],"_seopress_pro_rich_snippets_disable_all":"","_seopress_pro_rich_snippets_disable":[],"_seopress_pro_schemas":{"85852":{"rich_snippets_lb":{"opening_hours":[{"am":{"start":{"hours":"00","mins":"00"},"end":{"hours":"00","mins":"00"}},"pm":{"start":{"hours":"00","mins":"00"},"end":{"hours":"00","mins":"00"}}},{"am":{"start":{"hours":"00","mins":"00"},"end":{"hours":"00","mins":"00"}},"pm":{"start":{"hours":"00","mins":"00"},"end":{"hours":"00","mins":"00"}}},{"am":{"start":{"hours":"00","mins":"00"},"end":{"hours":"00","mins":"00"}},"pm":{"start":{"hours":"00","mins":"00"},"end":{"hours":"00","mins":"00"}}},{"am":{"start":{"hours":"00","mins":"00"},"end":{"hours":"00","mins":"00"}},"pm":{"start":{"hours":"00","mins":"00"},"end":{"hours":"00","mins":"00"}}},{"am":{"start":{"hours":"00","mins":"00"},"end":{"hours":"00","mins":"00"}},"pm":{"start":{"hours":"00","mins":"00"},"end":{"hours":"00","mins":"00"}}},{"am":{"start":{"hours":"00","mins":"00"},"end":{"hours":"00","mins":"00"}},"pm":{"start":{"hours":"00","mins":"00"},"end":{"hours":"00","mins":"00"}}},{"am":{"start":{"hours":"00","mins":"00"},"end":{"hours":"00","mins":"00"}},"pm":{"start":{"hours":"00","mins":"00"},"end":{"hours":"00","mins":"00"}}}]}}},"_nd_vani_enabled":false,"footnotes":""},"class_list":["post-111208","blog","type-blog","status-publish","has-post-thumbnail","hentry","infinite-scroll-item"],"acf":[],"_links":{"self":[{"href":"https:\/\/netzwerk.design\/en\/wp-json\/wp\/v2\/blog\/111208","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/netzwerk.design\/en\/wp-json\/wp\/v2\/blog"}],"about":[{"href":"https:\/\/netzwerk.design\/en\/wp-json\/wp\/v2\/types\/blog"}],"version-history":[{"count":0,"href":"https:\/\/netzwerk.design\/en\/wp-json\/wp\/v2\/blog\/111208\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/netzwerk.design\/en\/wp-json\/wp\/v2\/media\/137088"}],"wp:attachment":[{"href":"https:\/\/netzwerk.design\/en\/wp-json\/wp\/v2\/media?parent=111208"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}