{"id":203,"date":"2022-02-09T16:20:08","date_gmt":"2022-02-09T16:20:08","guid":{"rendered":"https:\/\/cms-test.zdv.uni-mainz.de\/demo-module\/?page_id=203"},"modified":"2026-04-02T09:25:40","modified_gmt":"2026-04-02T07:25:40","slug":"akkordeons","status":"publish","type":"page","link":"https:\/\/cms.zdv.uni-mainz.de\/modul-demo\/akkordeons\/","title":{"rendered":"Akkordeons"},"content":{"rendered":"<jgu-base-pageheader react-props=\"{\n    &quot;items&quot;: [\n        {\n            &quot;box&quot;: {\n                &quot;index&quot;: &quot;Modul&quot;,\n                &quot;title&quot;: &quot;Akkordeons&quot;,\n                &quot;link&quot;: {\n                    &quot;url&quot;: &quot;&quot;,\n                    &quot;title&quot;: &quot;mehr erfahren&quot;\n                }\n            },\n            &quot;color&quot;: &quot;dark&quot;,\n            &quot;image&quot;: {\n                &quot;url&quot;: &quot;https:\\\/\\\/via.placeholder.com\\\/1600x1050&quot;\n            },\n            &quot;imgCredit&quot;: &quot;&quot;,\n            &quot;video&quot;: false\n        }\n    ],\n    &quot;type&quot;: &quot;border&quot;,\n    &quot;align&quot;: &quot;full&quot;,\n    &quot;quicklinks&quot;: {\n        &quot;show&quot;: false,\n        &quot;selects&quot;: []\n    },\n    &quot;useBreadcrumb&quot;: false\n}\">\n<\/jgu-base-pageheader>\n\n\n<p class=\"has-big-font-size\">Akkordeons sind Gruppen von auf- und zuklappbaren Bereichen. Diese passen sich farblich jeweils an, wenn sie sich in wei\u00dfen, hellgrauen und dunklen Abschnitten befinden. Akkordeons werden im Editor ausgeklappt angezeigt. So erspart man sich das auf- und zuklappen.<\/p>\n\n\n\n<p class=\"has-big-font-size\"><\/p>\n\n\n<jgu-base-accordion react-props=\"{&quot;selected&quot;:4,&quot;initAllClosed&quot;:false,&quot;enableSearch&quot;:true,&quot;align&quot;:&quot;wide&quot;,&quot;hasAllOpenButton&quot;:true,&quot;onlyOne&quot;:false}\">\n    \n<jgu-base-accordionitem react-props=\"{&quot;title&quot;:&quot;Akkordeon Element - Inhalt&quot;,&quot;init&quot;:false,&quot;slug&quot;:&quot;akkordeon-element-inhalt&quot;,&quot;align&quot;:&quot;wide&quot;,&quot;customSlug&quot;:false}\">\n    \n\n<div class=\"wp-block-columns alignwide is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\"><jgu-base-image react-props=\"{\n    &quot;align&quot;: &quot;left&quot;,\n    &quot;image&quot;: {\n        &quot;url&quot;: &quot;https:\\\/\\\/www.pages.gitlab.rlp.net\\\/relaunch-jgu\\\/wordpress\\\/demo-assets\\\/images\\\/jgu-studierende-illu.b41814e6.svg&quot;,\n        &quot;id&quot;: null\n    },\n    &quot;imgWidth&quot;: 625,\n    &quot;width&quot;: 625,\n    &quot;hasLightbox&quot;: false,\n    &quot;caption&quot;: &quot;&quot;,\n    &quot;link&quot;: {\n        &quot;url&quot;: &quot;&quot;,\n        &quot;target&quot;: &quot;&quot;,\n        &quot;rel&quot;: &quot;&quot;\n    }\n}\" class=\"align-left\">\n    \n<\/jgu-base-image>\n\n\n<p class=\"alignwide has-text-align-wide has-big-font-size\">Dieser Inhalt besteht aus  zwei Spalten, in der Linken ein Bild, rechts ein Absatz. <\/p>\n\n\n\n<p class=\"alignwide has-text-align-wide has-big-font-size\">F\u00fcgen Sie beliebige Inhalte in die Akkordeonfalte ein. <\/p>\n<\/div>\n<\/div>\n\n\n<\/jgu-base-accordionitem>\n\n<jgu-base-accordionitem react-props=\"{&quot;title&quot;:&quot;Einstellm\\u00f6glichkeiten&quot;,&quot;init&quot;:false,&quot;slug&quot;:&quot;einstellmoglichkeiten&quot;,&quot;align&quot;:&quot;wide&quot;,&quot;customSlug&quot;:false}\">\n    \n\n<ul class=\"wp-block-list has-big-font-size\">\n<li><strong>Alle \u00f6ffnen Button anzeigen<\/strong>: damit der Besucher in alle Falten zeitgleich schauen kann<\/li>\n\n\n\n<li><strong>Nur ein Element \u00f6ffnen<\/strong>: \u00f6ffnet man eine Falte, schlie\u00dft sich eine andere<\/li>\n\n\n\n<li><strong>Alle Elemente am Anfang geschlossen <\/strong>oder man kann eine Falte w\u00e4hlen, die am Anfang ge\u00f6ffnet sein soll. <\/li>\n<\/ul>\n\n\n<\/jgu-base-accordionitem>\n\n<jgu-base-accordionitem react-props=\"{&quot;title&quot;:&quot;Benutzerdefinierter Anker&quot;,&quot;init&quot;:false,&quot;slug&quot;:&quot;benutzerdefinierter-anker&quot;,&quot;align&quot;:&quot;wide&quot;,&quot;customSlug&quot;:false}\">\n    \n\n<p class=\"has-big-font-size\">Haben Sie nur ein Akkordeon auf der Seite und kurze Beschriftungen, dann brauchen Sie keinen benutzerdefinierten Anker. Da die Beschriftung des Akkordeon-Elements f\u00fcr den Slug verwendet wird, sollten Sie den Anker eink\u00fcrzen. Anker ist quasi der &#8222;Landepunkt&#8220; und die &#8222;Zielsprungmarke&#8220;, damit Sie innerhalb der langen Seite einen Besucher direkt per Link an diese Stelle f\u00fchren k\u00f6nnen. WordPress nennt diesen hinteren Teil der Webadresse &#8222;slug&#8220;. Beides bezeichnet die gleiche Stelle.<\/p>\n\n\n<\/jgu-base-accordionitem>\n\n<jgu-base-accordionitem react-props=\"{&quot;title&quot;:&quot;Fehler bei den Sprungmarken&quot;,&quot;init&quot;:false,&quot;slug&quot;:&quot;fehler-bei-den-sprungmarken&quot;,&quot;align&quot;:&quot;wide&quot;,&quot;customSlug&quot;:false}\">\n    \n\n<p class=\"has-big-font-size\"><\/p>\n\n\n\n<p class=\"has-big-font-size\">Damit die Sprungmarken funktionieren, m\u00fcssen die Slugs eindeutig sein. Es darf also jede Akkordeon-Elementbeschriftung mehrfach geben, aber der Slug mu\u00df eindeutig sein! Beachtet man dies nicht, dann \u00f6ffnet sich unter Umst\u00e4nden die falsche Akkordeonfalte!<\/p>\n\n\n<\/jgu-base-accordionitem>\n\n<jgu-base-accordionitem react-props=\"{&quot;title&quot;:&quot;Suchmaschinenoptimierung&quot;,&quot;slug&quot;:&quot;suchmaschinenoptimierung&quot;,&quot;align&quot;:&quot;wide&quot;,&quot;init&quot;:true,&quot;customSlug&quot;:false}\">\n    \n\n<p class=\"has-big-font-size\">Benutzerfreundlich ist, wichtige Suchworte nicht in den Falten zu verstecken. Gehen Sie bei der Wahl der Beschriftung der Akkordeon-Elemente so vor: was w\u00fcrde jemand googeln, der diese Information in der Falte bekommen m\u00f6chte? Diese Stichworte m\u00fcssen in der Benennung stehen. Vermeiden Sie hier Gendern als <strong>einzige<\/strong> Benennung. Wer googelt z.B. Sch\u00fcler:innen?<\/p>\n\n\n\n<p class=\"has-big-font-size\"><\/p>\n\n\n<\/jgu-base-accordionitem>\n\n<\/jgu-base-accordion>\n\n\n<jgu-base-section react-props=\"{&quot;color&quot;:&quot;light&quot;,&quot;align&quot;:&quot;wide&quot;,&quot;padding&quot;:&quot;medium&quot;}\">\n<div class=\"jgu-bgsection bg bg-light \"><div class=\"content padding-medium\"><jgu-base-heading react-props=\"{\n    &quot;tags&quot;: {\n        &quot;htmlTag&quot;: &quot;h2&quot;,\n        &quot;classTag&quot;: &quot;&quot;,\n        &quot;tag&quot;: &quot;h2&quot;\n    },\n    &quot;heading&quot;: &quot;In grauem Abschnitt&quot;,\n    &quot;textAlign&quot;: &quot;left&quot;,\n    &quot;anchor&quot;: &quot;&quot;,\n    &quot;index&quot;: &quot;&quot;,\n    &quot;color&quot;: &quot;red&quot;\n}\"><\/jgu-base-heading>\n\n\n<jgu-base-accordion react-props=\"{&quot;selected&quot;:4,&quot;enableSearch&quot;:true,&quot;align&quot;:&quot;wide&quot;,&quot;hasAllOpenButton&quot;:true,&quot;onlyOne&quot;:false,&quot;initAllClosed&quot;:true}\">\n    \n<jgu-base-accordionitem react-props=\"{&quot;title&quot;:&quot;Eins&quot;,&quot;init&quot;:false,&quot;slug&quot;:&quot;eins-1&quot;,&quot;align&quot;:&quot;wide&quot;,&quot;customSlug&quot;:false}\">\n    \n\n<p class=\"has-big-font-size\">Inhalt von eins<\/p>\n\n\n<\/jgu-base-accordionitem>\n\n<jgu-base-accordionitem react-props=\"{&quot;title&quot;:&quot;Zwei&quot;,&quot;init&quot;:false,&quot;slug&quot;:&quot;zwei-1&quot;,&quot;align&quot;:&quot;wide&quot;,&quot;customSlug&quot;:false}\">\n    \n\n<p class=\"has-big-font-size\">Dies ist der Inhalt von Zwei<\/p>\n\n\n<\/jgu-base-accordionitem>\n\n<jgu-base-accordionitem react-props=\"{&quot;title&quot;:&quot;Drei&quot;,&quot;init&quot;:false,&quot;slug&quot;:&quot;drei&quot;,&quot;align&quot;:&quot;wide&quot;,&quot;customSlug&quot;:false}\">\n    \n\n<p class=\"has-big-font-size\">Dies ist der Inhalt von Drei<\/p>\n\n\n<\/jgu-base-accordionitem>\n\n<\/jgu-base-accordion>\n<\/div><\/div>\n<\/jgu-base-section>\n\n<jgu-base-section react-props=\"{&quot;color&quot;:&quot;dark&quot;,&quot;align&quot;:&quot;wide&quot;,&quot;padding&quot;:&quot;medium&quot;}\">\n<div class=\"jgu-bgsection bg bg-dark \"><div class=\"content padding-medium\"><jgu-base-heading react-props=\"{\n    &quot;color&quot;: &quot;default&quot;,\n    &quot;tags&quot;: {\n        &quot;htmlTag&quot;: &quot;h2&quot;,\n        &quot;classTag&quot;: &quot;&quot;,\n        &quot;tag&quot;: &quot;h2&quot;\n    },\n    &quot;heading&quot;: &quot;Akkordeon in dunklem Abschnitt&quot;,\n    &quot;textAlign&quot;: &quot;left&quot;,\n    &quot;anchor&quot;: &quot;&quot;,\n    &quot;index&quot;: &quot;&quot;\n}\"><\/jgu-base-heading>\n\n\n<jgu-base-accordion react-props=\"{&quot;selected&quot;:4,&quot;enableSearch&quot;:true,&quot;align&quot;:&quot;wide&quot;,&quot;hasAllOpenButton&quot;:true,&quot;onlyOne&quot;:false,&quot;initAllClosed&quot;:true}\">\n    \n<jgu-base-accordionitem react-props=\"{&quot;title&quot;:&quot;Allgemeine Infos&quot;,&quot;init&quot;:false,&quot;slug&quot;:&quot;allgemeine-infos&quot;,&quot;align&quot;:&quot;wide&quot;,&quot;customSlug&quot;:false}\">\n    \n\n<div class=\"wp-block-columns alignwide is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\"><jgu-base-image react-props=\"{\n    &quot;image&quot;: {\n        &quot;url&quot;: &quot;https:\\\/\\\/www.pages.gitlab.rlp.net\\\/relaunch-jgu\\\/wordpress\\\/demo-assets\\\/images\\\/jgu-studierende-illu.b41814e6.svg&quot;,\n        &quot;id&quot;: null\n    },\n    &quot;align&quot;: &quot;&quot;,\n    &quot;hasLightbox&quot;: false,\n    &quot;caption&quot;: &quot;&quot;,\n    &quot;imgWidth&quot;: 0,\n    &quot;link&quot;: {\n        &quot;url&quot;: &quot;&quot;,\n        &quot;target&quot;: &quot;&quot;,\n        &quot;rel&quot;: &quot;&quot;\n    }\n}\" class=\"align-\">\n    \n<\/jgu-base-image>\n\n\n<p class=\"alignwide has-text-align-wide has-big-font-size\">Ich bin ein Text.<\/p>\n\n\n<jgu-base-button style=\"display: flex; flex-wrap: wrap; column-gap: 30px; max-width: 100%; flex-direction: row; justify-content: left\">\n  \n<jgu-base-buttonitem react-props=\"{\n    &quot;text&quot;: &quot;Test&quot;,\n    &quot;align&quot;: &quot;left&quot;,\n    &quot;styling&quot;: &quot;primary&quot;,\n    &quot;icon&quot;: &quot;arrow-right-solid&quot;,\n    &quot;type&quot;: &quot;default&quot;,\n    &quot;link&quot;: {\n        &quot;url&quot;: &quot;&quot;,\n        &quot;linkTarget&quot;: &quot;&quot;,\n        &quot;rel&quot;: &quot;&quot;\n    },\n    &quot;iconBefore&quot;: false,\n    &quot;isSmall&quot;: false,\n    &quot;fullWidth&quot;: false,\n    &quot;className&quot;: &quot;&quot;\n}\"><\/jgu-base-buttonitem>\n\n<\/jgu-base-button><\/div>\n<\/div>\n\n\n<jgu-base-slider react-props=\"{&quot;perPage&quot;:3,&quot;slidesCount&quot;:3,&quot;responsiveSettings&quot;:{&quot;mobile&quot;:{&quot;perPage&quot;:3,&quot;arrows&quot;:true,&quot;pagination&quot;:true},&quot;tablet&quot;:{&quot;perPage&quot;:2,&quot;arrows&quot;:true,&quot;pagination&quot;:false},&quot;desktop&quot;:{&quot;perPage&quot;:3,&quot;arrows&quot;:true,&quot;pagination&quot;:false},&quot;desktop-xl&quot;:{&quot;perPage&quot;:3,&quot;arrows&quot;:true,&quot;pagination&quot;:false}},&quot;type&quot;:&quot;&quot;,&quot;template&quot;:&quot;&quot;,&quot;useNumbers&quot;:false,&quot;scrollDistance&quot;:&quot;screen&quot;}\">\n    \n<jgu-base-numberbox react-props=\"{\n    &quot;image&quot;: {\n        &quot;id&quot;: null,\n        &quot;url&quot;: &quot;https:\\\/\\\/www.pages.gitlab.rlp.net\\\/relaunch-jgu\\\/wordpress\\\/demo-assets\\\/images\\\/jgu-studierende-illu.b41814e6.svg&quot;\n    },\n    &quot;title&quot;: &quot;wissensch. Sammlungen&quot;,\n    &quot;subline&quot;: &quot;am Campus&quot;,\n    &quot;headline&quot;: {\n        &quot;htmlTag&quot;: &quot;h2&quot;,\n        &quot;classTag&quot;: &quot;&quot;,\n        &quot;tag&quot;: &quot;h2&quot;\n    },\n    &quot;number&quot;: &quot;31&quot;,\n    &quot;counting&quot;: true,\n    &quot;align&quot;: &quot;wide&quot;,\n    &quot;formatString&quot;: &quot;{number}&quot;\n}\">\n    \n<\/jgu-base-numberbox>\n\n\n<jgu-base-numberbox react-props=\"{\n    &quot;image&quot;: {\n        &quot;id&quot;: null,\n        &quot;url&quot;: &quot;https:\\\/\\\/www.pages.gitlab.rlp.net\\\/relaunch-jgu\\\/wordpress\\\/demo-assets\\\/images\\\/jgu-nationen-illu.e35e97bc.svg&quot;\n    },\n    &quot;title&quot;: &quot;Veranstaltungen&quot;,\n    &quot;subline&quot;: &quot;finden j\\u00e4hrlich auf dem Campus statt&quot;,\n    &quot;headline&quot;: {\n        &quot;htmlTag&quot;: &quot;h2&quot;,\n        &quot;classTag&quot;: &quot;&quot;,\n        &quot;tag&quot;: &quot;h2&quot;\n    },\n    &quot;number&quot;: &quot;1500&quot;,\n    &quot;counting&quot;: true,\n    &quot;align&quot;: &quot;wide&quot;,\n    &quot;formatString&quot;: &quot;{number}&quot;\n}\">\n    \n<\/jgu-base-numberbox>\n\n\n<jgu-base-numberbox react-props=\"{\n    &quot;image&quot;: {\n        &quot;id&quot;: null,\n        &quot;url&quot;: &quot;https:\\\/\\\/www.pages.gitlab.rlp.net\\\/relaunch-jgu\\\/wordpress\\\/demo-assets\\\/images\\\/jgu-kennzahlen-foedermittel.png&quot;\n    },\n    &quot;title&quot;: &quot;Sportarten&quot;,\n    &quot;subline&quot;: &quot;bietet der Allgemeine Hochschulsport&quot;,\n    &quot;headline&quot;: {\n        &quot;htmlTag&quot;: &quot;h2&quot;,\n        &quot;classTag&quot;: &quot;&quot;,\n        &quot;tag&quot;: &quot;h2&quot;\n    },\n    &quot;number&quot;: &quot;60&quot;,\n    &quot;align&quot;: &quot;wide&quot;,\n    &quot;formatString&quot;: &quot;{number}&quot;,\n    &quot;counting&quot;: false\n}\">\n    \n<\/jgu-base-numberbox>\n\n\n<\/jgu-base-slider>\n\n\n<\/jgu-base-accordionitem>\n\n<jgu-base-accordionitem react-props=\"{&quot;title&quot;:&quot;Lernen und Arbeiten&quot;,&quot;init&quot;:false,&quot;slug&quot;:&quot;lernen-und-arbeiten&quot;,&quot;align&quot;:&quot;wide&quot;,&quot;customSlug&quot;:false}\">\n    \n\n<p class=\"has-big-font-size\">Benutzerfreundlich ist, wichtige Suchworte nicht in den Falten zu verstecken. Gehen Sie bei der Wahl der Beschriftung der Akkordeon-Elemente so vor: was w\u00fcrde jemand googeln, der diese Information in der Falte bekommen m\u00f6chte? Diese Stichworte m\u00fcssen in der Benennung stehen.<\/p>\n\n\n<\/jgu-base-accordionitem>\n\n<jgu-base-accordionitem react-props=\"{&quot;title&quot;:&quot;Leben&quot;,&quot;init&quot;:false,&quot;slug&quot;:&quot;leben&quot;,&quot;align&quot;:&quot;wide&quot;,&quot;customSlug&quot;:false}\">\n    \n\n<p class=\"has-big-font-size\">Benutzerfreundlich ist, wichtige Suchworte nicht in den Falten zu verstecken. Gehen Sie bei der Wahl der Beschriftung der Akkordeon-Elemente so vor: was w\u00fcrde jemand googeln, der diese Information in der Falte bekommen m\u00f6chte? Diese Stichworte m\u00fcssen in der Benennung stehen.<\/p>\n\n\n<\/jgu-base-accordionitem>\n\n<jgu-base-accordionitem react-props=\"{&quot;title&quot;:&quot;Forschen&quot;,&quot;init&quot;:false,&quot;slug&quot;:&quot;forschen&quot;,&quot;align&quot;:&quot;wide&quot;,&quot;customSlug&quot;:false}\">\n    \n\n<p class=\"has-big-font-size\">Benutzerfreundlich ist, wichtige Suchworte nicht in den Falten zu verstecken. Gehen Sie bei der Wahl der Beschriftung der Akkordeon-Elemente so vor: was w\u00fcrde jemand googeln, der diese Information in der Falte bekommen m\u00f6chte? Diese Stichworte m\u00fcssen in der Benennung stehen.<\/p>\n\n\n<\/jgu-base-accordionitem>\n\n<\/jgu-base-accordion>\n<\/div><\/div>\n<\/jgu-base-section>\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n<jgu-base-heading react-props=\"{\n    &quot;tags&quot;: {\n        &quot;htmlTag&quot;: &quot;h2&quot;,\n        &quot;classTag&quot;: &quot;&quot;,\n        &quot;tag&quot;: &quot;h2&quot;\n    },\n    &quot;heading&quot;: &quot;Akkordeon mit im voraus ge\\u00f6ffnetem Element&quot;,\n    &quot;textAlign&quot;: &quot;left&quot;,\n    &quot;anchor&quot;: &quot;&quot;,\n    &quot;index&quot;: &quot;&quot;,\n    &quot;color&quot;: &quot;red&quot;\n}\"><\/jgu-base-heading>\n\n\n\n<p class=\"has-big-font-size\"><strong>Hier kann man nur ein Element \u00f6ffnen<\/strong> und ein Tab ist Standardm\u00e4\u00dfig ausgew\u00e4hlt.<\/p>\n\n\n<jgu-base-accordion react-props=\"{&quot;selected&quot;:2,&quot;hasAllOpenButton&quot;:false,&quot;onlyOne&quot;:true,&quot;initAllClosed&quot;:false,&quot;align&quot;:&quot;wide&quot;,&quot;enableSearch&quot;:false}\">\n    \n<jgu-base-accordionitem react-props=\"{&quot;title&quot;:&quot;EINS&quot;,&quot;init&quot;:false,&quot;slug&quot;:&quot;eins&quot;,&quot;align&quot;:&quot;wide&quot;,&quot;customSlug&quot;:false}\">\n    \n\n<div class=\"wp-block-columns alignwide is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\"><\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\"><\/div>\n<\/div>\n\n\n<\/jgu-base-accordionitem>\n\n<jgu-base-accordionitem react-props=\"{&quot;title&quot;:&quot;ZWEI&quot;,&quot;init&quot;:false,&quot;slug&quot;:&quot;zwei&quot;,&quot;align&quot;:&quot;wide&quot;,&quot;customSlug&quot;:false}\">\n    \n\n<p class=\"has-big-font-size\">Das zweite Element ist hier im voraus ge\u00f6ffnet<\/p>\n\n\n<\/jgu-base-accordionitem>\n\n<\/jgu-base-accordion>\n\n\n<jgu-base-heading react-props=\"{\n    &quot;tags&quot;: {\n        &quot;htmlTag&quot;: &quot;h2&quot;,\n        &quot;classTag&quot;: &quot;&quot;,\n        &quot;tag&quot;: &quot;h2&quot;\n    },\n    &quot;heading&quot;: &quot;Akkordeon mit geschlossenen Elementen und Suche&quot;,\n    &quot;textAlign&quot;: &quot;left&quot;,\n    &quot;anchor&quot;: &quot;&quot;,\n    &quot;index&quot;: &quot;&quot;,\n    &quot;color&quot;: &quot;red&quot;\n}\"><\/jgu-base-heading>\n\n\n<jgu-base-accordion react-props=\"{&quot;selected&quot;:3,&quot;hasAllOpenButton&quot;:false,&quot;enableSearch&quot;:true,&quot;align&quot;:&quot;wide&quot;,&quot;onlyOne&quot;:false,&quot;initAllClosed&quot;:true}\">\n    \n<jgu-base-accordionitem react-props=\"{&quot;title&quot;:&quot;Allgemeine Infos&quot;,&quot;init&quot;:false,&quot;slug&quot;:&quot;allgemeine-infos-1&quot;,&quot;align&quot;:&quot;wide&quot;,&quot;customSlug&quot;:false}\">\n    \n\n<div class=\"wp-block-columns alignwide is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p class=\"has-big-font-size\">Ein kleiner Text<\/p>\n\n\n<jgu-base-button style=\"display: flex; flex-wrap: wrap; column-gap: 30px; max-width: 100%; flex-direction: row; justify-content: left\">\n  \n<jgu-base-buttonitem react-props=\"{\n    &quot;text&quot;: &quot;Test&quot;,\n    &quot;align&quot;: &quot;left&quot;,\n    &quot;styling&quot;: &quot;primary&quot;,\n    &quot;icon&quot;: &quot;arrow-right-solid&quot;,\n    &quot;type&quot;: &quot;default&quot;,\n    &quot;link&quot;: {\n        &quot;url&quot;: &quot;&quot;,\n        &quot;linkTarget&quot;: &quot;&quot;,\n        &quot;rel&quot;: &quot;&quot;\n    },\n    &quot;iconBefore&quot;: false,\n    &quot;isSmall&quot;: false,\n    &quot;fullWidth&quot;: false,\n    &quot;className&quot;: &quot;&quot;\n}\"><\/jgu-base-buttonitem>\n\n<\/jgu-base-button><\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\"><\/div>\n<\/div>\n\n\n<\/jgu-base-accordionitem>\n\n<jgu-base-accordionitem react-props=\"{&quot;title&quot;:&quot;Lernen und Arbeiten&quot;,&quot;init&quot;:false,&quot;slug&quot;:&quot;lernen-und-arbeiten-1&quot;,&quot;align&quot;:&quot;wide&quot;,&quot;customSlug&quot;:false}\">\n    \n\n<p class=\"has-big-font-size\">Benutzerfreundlich ist, wichtige Suchworte nicht in den Falten zu verstecken. Gehen Sie bei der Wahl der Beschriftung der Akkordeon-Elemente so vor: was w\u00fcrde jemand googeln, der diese Information in der Falte bekommen m\u00f6chte? Diese Stichworte m\u00fcssen in der Benennung stehen.<\/p>\n\n\n<\/jgu-base-accordionitem>\n\n<jgu-base-accordionitem react-props=\"{&quot;title&quot;:&quot;Leben&quot;,&quot;init&quot;:false,&quot;slug&quot;:&quot;leben-1&quot;,&quot;align&quot;:&quot;wide&quot;,&quot;customSlug&quot;:false}\">\n    \n\n<p class=\"has-big-font-size\">Ein kleiner Text<\/p>\n\n\n<\/jgu-base-accordionitem>\n\n<jgu-base-accordionitem react-props=\"{&quot;title&quot;:&quot;Forschen&quot;,&quot;init&quot;:false,&quot;slug&quot;:&quot;forschen-1&quot;,&quot;align&quot;:&quot;wide&quot;,&quot;customSlug&quot;:false}\">\n    \n\n<p class=\"has-big-font-size\">Benutzerfreundlich ist, wichtige Suchworte nicht in den Falten zu verstecken. Gehen Sie bei der Wahl der Beschriftung der Akkordeon-Elemente so vor: was w\u00fcrde jemand googeln, der diese Information in der Falte bekommen m\u00f6chte? Diese Stichworte m\u00fcssen in der Benennung stehen.<\/p>\n\n\n<\/jgu-base-accordionitem>\n\n<\/jgu-base-accordion>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div class=\"wp-block-columns alignwide is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\"><jgu-base-accordion react-props=\"{&quot;selected&quot;:2,&quot;hasAllOpenButton&quot;:false,&quot;align&quot;:&quot;wide&quot;,&quot;onlyOne&quot;:false,&quot;initAllClosed&quot;:true,&quot;enableSearch&quot;:false}\">\n    \n<jgu-base-accordionitem react-props=\"{&quot;title&quot;:&quot;Allgemeine Infos&quot;,&quot;init&quot;:false,&quot;slug&quot;:&quot;allgemeine-infos-1&quot;,&quot;align&quot;:&quot;wide&quot;,&quot;customSlug&quot;:false}\">\n    \n\n<div class=\"wp-block-columns alignwide is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p class=\"has-big-font-size\">Ein kleiner Text<\/p>\n\n\n<jgu-base-button style=\"display: flex; flex-wrap: wrap; column-gap: 30px; max-width: 100%; flex-direction: row; justify-content: left\">\n  \n<jgu-base-buttonitem react-props=\"{\n    &quot;text&quot;: &quot;Test&quot;,\n    &quot;align&quot;: &quot;left&quot;,\n    &quot;styling&quot;: &quot;primary&quot;,\n    &quot;icon&quot;: &quot;arrow-right-solid&quot;,\n    &quot;type&quot;: &quot;default&quot;,\n    &quot;link&quot;: {\n        &quot;url&quot;: &quot;&quot;,\n        &quot;linkTarget&quot;: &quot;&quot;,\n        &quot;rel&quot;: &quot;&quot;\n    },\n    &quot;iconBefore&quot;: false,\n    &quot;isSmall&quot;: false,\n    &quot;fullWidth&quot;: false,\n    &quot;className&quot;: &quot;&quot;\n}\"><\/jgu-base-buttonitem>\n\n<\/jgu-base-button><\/div>\n<\/div>\n\n\n<\/jgu-base-accordionitem>\n\n<jgu-base-accordionitem react-props=\"{&quot;title&quot;:&quot;Lernen und Arbeiten&quot;,&quot;init&quot;:false,&quot;slug&quot;:&quot;lernen-und-arbeiten-1&quot;,&quot;align&quot;:&quot;wide&quot;,&quot;customSlug&quot;:false}\">\n    \n\n<p class=\"has-big-font-size\">Ein sehr kleiner Text<\/p>\n\n\n<\/jgu-base-accordionitem>\n\n<jgu-base-accordionitem react-props=\"{&quot;title&quot;:&quot;Leben&quot;,&quot;init&quot;:false,&quot;slug&quot;:&quot;leben-1&quot;,&quot;align&quot;:&quot;wide&quot;,&quot;customSlug&quot;:false}\">\n    \n\n<p class=\"has-big-font-size\">Benutzerfreundlich ist, wichtige Suchworte nicht in den Falten zu verstecken. Gehen Sie bei der Wahl der Beschriftung der Akkordeon-Elemente so vor: was w\u00fcrde jemand googeln, der diese Information in der Falte bekommen m\u00f6chte? Diese Stichworte m\u00fcssen in der Benennung stehen.<\/p>\n\n\n<\/jgu-base-accordionitem>\n\n<jgu-base-accordionitem react-props=\"{&quot;title&quot;:&quot;Forschen&quot;,&quot;init&quot;:false,&quot;slug&quot;:&quot;forschen-1&quot;,&quot;align&quot;:&quot;wide&quot;,&quot;customSlug&quot;:false}\">\n    \n\n<p class=\"has-big-font-size\">Dieser Text ist versteckt<\/p>\n\n\n<\/jgu-base-accordionitem>\n\n<\/jgu-base-accordion>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p class=\"has-big-font-size\">eine dreigeteilte Spalte. Links ein Akkordeon. Zum Testen wie es mit wenig Platz aussieht<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\"><\/div>\n<\/div>\n    <div style=\"display: none\">\n        \n    <\/div>","protected":false},"excerpt":{"rendered":"<p>Akkordeons sind Gruppen von auf- und zuklappbaren Bereichen. Diese passen sich farblich jeweils an, wenn sie sich in wei\u00dfen, hellgrauen und dunklen Abschnitten befinden. Akkordeons werden im Editor ausgeklappt angezeigt. So erspart man sich das auf- und zuklappen. Hier kann man nur ein Element \u00f6ffnen und ein Tab ist Standardm\u00e4\u00dfig ausgew\u00e4hlt. eine dreigeteilte Spalte. Links &hellip; <a href=\"https:\/\/cms.zdv.uni-mainz.de\/modul-demo\/akkordeons\/\">Weiter lesen<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-203","page","type-page","status-publish","hentry"],"content_raw":"<!-- wp:jgu\/pageheader {\"items\":[{\"box\":{\"index\":\"Modul\",\"title\":\"Akkordeons\",\"link\":{\"url\":\"\",\"title\":\"mehr erfahren\"}},\"color\":\"dark\",\"image\":{\"url\":\"https:\/\/via.placeholder.com\/1600x1050\"},\"imgCredit\":\"\",\"video\":false}],\"type\":\"border\"} \/-->\n\n<!-- wp:paragraph {\"className\":\"has-big-font-size\"} -->\n<p class=\"has-big-font-size\">Akkordeons sind Gruppen von auf- und zuklappbaren Bereichen. Diese passen sich farblich jeweils an, wenn sie sich in wei\u00dfen, hellgrauen und dunklen Abschnitten befinden. Akkordeons werden im Editor ausgeklappt angezeigt. So erspart man sich das auf- und zuklappen.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph {\"className\":\"has-big-font-size\"} -->\n<p class=\"has-big-font-size\"><\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:jgu\/accordion {\"selected\":4,\"initAllClosed\":false,\"enableSearch\":true} -->\n<!-- wp:jgu\/accordion-item {\"title\":\"Akkordeon Element - Inhalt\",\"init\":false,\"slug\":\"akkordeon-element-inhalt\"} -->\n<!-- wp:columns {\"className\":\"alignwide\"} -->\n<div class=\"wp-block-columns alignwide\"><!-- wp:column -->\n<div class=\"wp-block-column\"><!-- wp:jgu\/image {\"align\":\"left\",\"image\":{\"url\":\"https:\/\/www.pages.gitlab.rlp.net\/relaunch-jgu\/wordpress\/demo-assets\/images\/jgu-studierende-illu.b41814e6.svg\",\"id\":null},\"imgWidth\":625,\"width\":625} \/-->\n\n<!-- wp:paragraph {\"className\":\"alignwide has-text-align-wide has-big-font-size\"} -->\n<p class=\"alignwide has-text-align-wide has-big-font-size\">Dieser Inhalt besteht aus  zwei Spalten, in der Linken ein Bild, rechts ein Absatz. <\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph {\"className\":\"alignwide has-text-align-wide has-big-font-size\"} -->\n<p class=\"alignwide has-text-align-wide has-big-font-size\">F\u00fcgen Sie beliebige Inhalte in die Akkordeonfalte ein. <\/p>\n<!-- \/wp:paragraph --><\/div>\n<!-- \/wp:column --><\/div>\n<!-- \/wp:columns -->\n<!-- \/wp:jgu\/accordion-item -->\n\n<!-- wp:jgu\/accordion-item {\"title\":\"Einstellm\u00f6glichkeiten\",\"init\":false,\"slug\":\"einstellmoglichkeiten\"} -->\n<!-- wp:list {\"className\":\"has-big-font-size\"} -->\n<ul class=\"wp-block-list has-big-font-size\"><!-- wp:list-item -->\n<li><strong>Alle \u00f6ffnen Button anzeigen<\/strong>: damit der Besucher in alle Falten zeitgleich schauen kann<\/li>\n<!-- \/wp:list-item -->\n\n<!-- wp:list-item -->\n<li><strong>Nur ein Element \u00f6ffnen<\/strong>: \u00f6ffnet man eine Falte, schlie\u00dft sich eine andere<\/li>\n<!-- \/wp:list-item -->\n\n<!-- wp:list-item -->\n<li><strong>Alle Elemente am Anfang geschlossen <\/strong>oder man kann eine Falte w\u00e4hlen, die am Anfang ge\u00f6ffnet sein soll. <\/li>\n<!-- \/wp:list-item --><\/ul>\n<!-- \/wp:list -->\n<!-- \/wp:jgu\/accordion-item -->\n\n<!-- wp:jgu\/accordion-item {\"title\":\"Benutzerdefinierter Anker\",\"init\":false,\"slug\":\"benutzerdefinierter-anker\"} -->\n<!-- wp:paragraph {\"className\":\"has-big-font-size\"} -->\n<p class=\"has-big-font-size\">Haben Sie nur ein Akkordeon auf der Seite und kurze Beschriftungen, dann brauchen Sie keinen benutzerdefinierten Anker. Da die Beschriftung des Akkordeon-Elements f\u00fcr den Slug verwendet wird, sollten Sie den Anker eink\u00fcrzen. Anker ist quasi der \"Landepunkt\" und die \"Zielsprungmarke\", damit Sie innerhalb der langen Seite einen Besucher direkt per Link an diese Stelle f\u00fchren k\u00f6nnen. WordPress nennt diesen hinteren Teil der Webadresse \"slug\". Beides bezeichnet die gleiche Stelle.<\/p>\n<!-- \/wp:paragraph -->\n<!-- \/wp:jgu\/accordion-item -->\n\n<!-- wp:jgu\/accordion-item {\"title\":\"Fehler bei den Sprungmarken\",\"init\":false,\"slug\":\"fehler-bei-den-sprungmarken\"} -->\n<!-- wp:paragraph {\"className\":\"has-big-font-size\"} -->\n<p class=\"has-big-font-size\"><\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph {\"className\":\"has-big-font-size\"} -->\n<p class=\"has-big-font-size\">Damit die Sprungmarken funktionieren, m\u00fcssen die Slugs eindeutig sein. Es darf also jede Akkordeon-Elementbeschriftung mehrfach geben, aber der Slug mu\u00df eindeutig sein! Beachtet man dies nicht, dann \u00f6ffnet sich unter Umst\u00e4nden die falsche Akkordeonfalte!<\/p>\n<!-- \/wp:paragraph -->\n<!-- \/wp:jgu\/accordion-item -->\n\n<!-- wp:jgu\/accordion-item {\"title\":\"Suchmaschinenoptimierung\",\"slug\":\"suchmaschinenoptimierung\"} -->\n<!-- wp:paragraph {\"className\":\"has-big-font-size\"} -->\n<p class=\"has-big-font-size\">Benutzerfreundlich ist, wichtige Suchworte nicht in den Falten zu verstecken. Gehen Sie bei der Wahl der Beschriftung der Akkordeon-Elemente so vor: was w\u00fcrde jemand googeln, der diese Information in der Falte bekommen m\u00f6chte? Diese Stichworte m\u00fcssen in der Benennung stehen. Vermeiden Sie hier Gendern als <strong>einzige<\/strong> Benennung. Wer googelt z.B. Sch\u00fcler:innen?<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph {\"className\":\"has-big-font-size\"} -->\n<p class=\"has-big-font-size\"><\/p>\n<!-- \/wp:paragraph -->\n<!-- \/wp:jgu\/accordion-item -->\n<!-- \/wp:jgu\/accordion -->\n\n<!-- wp:jgu\/section {\"color\":\"light\"} -->\n<div class=\"jgu-bgsection bg bg-light \"><div class=\"content padding-medium\"><!-- wp:jgu\/heading {\"tags\":{\"htmlTag\":\"h2\",\"classTag\":\"\",\"tag\":\"h2\"},\"heading\":\"In grauem Abschnitt\"} \/-->\n\n<!-- wp:jgu\/accordion {\"selected\":4,\"enableSearch\":true} -->\n<!-- wp:jgu\/accordion-item {\"title\":\"Eins\",\"init\":false,\"slug\":\"eins-1\"} -->\n<!-- wp:paragraph {\"className\":\"has-big-font-size\"} -->\n<p class=\"has-big-font-size\">Inhalt von eins<\/p>\n<!-- \/wp:paragraph -->\n<!-- \/wp:jgu\/accordion-item -->\n\n<!-- wp:jgu\/accordion-item {\"title\":\"Zwei\",\"init\":false,\"slug\":\"zwei-1\"} -->\n<!-- wp:paragraph {\"className\":\"has-big-font-size\"} -->\n<p class=\"has-big-font-size\">Dies ist der Inhalt von Zwei<\/p>\n<!-- \/wp:paragraph -->\n<!-- \/wp:jgu\/accordion-item -->\n\n<!-- wp:jgu\/accordion-item {\"title\":\"Drei\",\"init\":false,\"slug\":\"drei\"} -->\n<!-- wp:paragraph {\"className\":\"has-big-font-size\"} -->\n<p class=\"has-big-font-size\">Dies ist der Inhalt von Drei<\/p>\n<!-- \/wp:paragraph -->\n<!-- \/wp:jgu\/accordion-item -->\n<!-- \/wp:jgu\/accordion --><\/div><\/div>\n<!-- \/wp:jgu\/section -->\n\n<!-- wp:jgu\/section {\"color\":\"dark\"} -->\n<div class=\"jgu-bgsection bg bg-dark \"><div class=\"content padding-medium\"><!-- wp:jgu\/heading {\"color\":\"default\",\"tags\":{\"htmlTag\":\"h2\",\"classTag\":\"\",\"tag\":\"h2\"},\"heading\":\"Akkordeon in dunklem Abschnitt\"} \/-->\n\n<!-- wp:jgu\/accordion {\"selected\":4,\"enableSearch\":true} -->\n<!-- wp:jgu\/accordion-item {\"title\":\"Allgemeine Infos\",\"init\":false,\"slug\":\"allgemeine-infos\"} -->\n<!-- wp:columns {\"className\":\"alignwide\"} -->\n<div class=\"wp-block-columns alignwide\"><!-- wp:column -->\n<div class=\"wp-block-column\"><!-- wp:jgu\/image {\"image\":{\"url\":\"https:\/\/www.pages.gitlab.rlp.net\/relaunch-jgu\/wordpress\/demo-assets\/images\/jgu-studierende-illu.b41814e6.svg\",\"id\":null}} \/-->\n\n<!-- wp:paragraph {\"className\":\"alignwide has-text-align-wide has-big-font-size\"} -->\n<p class=\"alignwide has-text-align-wide has-big-font-size\">Ich bin ein Text.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:jgu\/button {\"className\":\"wp-block-jgu-buttons alignwide\"} -->\n<!-- wp:jgu\/button-item {\"text\":\"Test\"} \/-->\n<!-- \/wp:jgu\/button --><\/div>\n<!-- \/wp:column --><\/div>\n<!-- \/wp:columns -->\n\n<!-- wp:jgu\/slider {\"perPage\":3,\"slidesCount\":3,\"responsiveSettings\":{\"mobile\":{\"perPage\":3,\"arrows\":true,\"pagination\":true},\"tablet\":{\"perPage\":2,\"arrows\":true,\"pagination\":false},\"desktop\":{\"perPage\":3,\"arrows\":true,\"pagination\":false},\"desktop-xl\":{\"perPage\":3,\"arrows\":true,\"pagination\":false}}} -->\n<!-- wp:jgu\/numberbox {\"image\":{\"id\":null,\"url\":\"https:\/\/www.pages.gitlab.rlp.net\/relaunch-jgu\/wordpress\/demo-assets\/images\/jgu-studierende-illu.b41814e6.svg\"},\"title\":\"wissensch. Sammlungen\",\"subline\":\"am Campus\",\"headline\":{\"htmlTag\":\"h2\",\"classTag\":\"\",\"tag\":\"h2\"},\"number\":\"31\",\"counting\":true} \/-->\n\n<!-- wp:jgu\/numberbox {\"image\":{\"id\":null,\"url\":\"https:\/\/www.pages.gitlab.rlp.net\/relaunch-jgu\/wordpress\/demo-assets\/images\/jgu-nationen-illu.e35e97bc.svg\"},\"title\":\"Veranstaltungen\",\"subline\":\"finden j\u00e4hrlich auf dem Campus statt\",\"headline\":{\"htmlTag\":\"h2\",\"classTag\":\"\",\"tag\":\"h2\"},\"number\":\"1500\",\"counting\":true} \/-->\n\n<!-- wp:jgu\/numberbox {\"image\":{\"id\":null,\"url\":\"https:\/\/www.pages.gitlab.rlp.net\/relaunch-jgu\/wordpress\/demo-assets\/images\/jgu-kennzahlen-foedermittel.png\"},\"title\":\"Sportarten\",\"subline\":\"bietet der Allgemeine Hochschulsport\",\"headline\":{\"htmlTag\":\"h2\",\"classTag\":\"\",\"tag\":\"h2\"},\"number\":\"60\"} \/-->\n<!-- \/wp:jgu\/slider -->\n<!-- \/wp:jgu\/accordion-item -->\n\n<!-- wp:jgu\/accordion-item {\"title\":\"Lernen und Arbeiten\",\"init\":false,\"slug\":\"lernen-und-arbeiten\"} -->\n<!-- wp:paragraph {\"className\":\"has-big-font-size\"} -->\n<p class=\"has-big-font-size\">Benutzerfreundlich ist, wichtige Suchworte nicht in den Falten zu verstecken. Gehen Sie bei der Wahl der Beschriftung der Akkordeon-Elemente so vor: was w\u00fcrde jemand googeln, der diese Information in der Falte bekommen m\u00f6chte? Diese Stichworte m\u00fcssen in der Benennung stehen.<\/p>\n<!-- \/wp:paragraph -->\n<!-- \/wp:jgu\/accordion-item -->\n\n<!-- wp:jgu\/accordion-item {\"title\":\"Leben\",\"init\":false,\"slug\":\"leben\"} -->\n<!-- wp:paragraph {\"className\":\"has-big-font-size\"} -->\n<p class=\"has-big-font-size\">Benutzerfreundlich ist, wichtige Suchworte nicht in den Falten zu verstecken. Gehen Sie bei der Wahl der Beschriftung der Akkordeon-Elemente so vor: was w\u00fcrde jemand googeln, der diese Information in der Falte bekommen m\u00f6chte? Diese Stichworte m\u00fcssen in der Benennung stehen.<\/p>\n<!-- \/wp:paragraph -->\n<!-- \/wp:jgu\/accordion-item -->\n\n<!-- wp:jgu\/accordion-item {\"title\":\"Forschen\",\"init\":false,\"slug\":\"forschen\"} -->\n<!-- wp:paragraph {\"className\":\"has-big-font-size\"} -->\n<p class=\"has-big-font-size\">Benutzerfreundlich ist, wichtige Suchworte nicht in den Falten zu verstecken. Gehen Sie bei der Wahl der Beschriftung der Akkordeon-Elemente so vor: was w\u00fcrde jemand googeln, der diese Information in der Falte bekommen m\u00f6chte? Diese Stichworte m\u00fcssen in der Benennung stehen.<\/p>\n<!-- \/wp:paragraph -->\n<!-- \/wp:jgu\/accordion-item -->\n<!-- \/wp:jgu\/accordion --><\/div><\/div>\n<!-- \/wp:jgu\/section -->\n\n<!-- wp:spacer {\"height\":\"100px\"} -->\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n<!-- \/wp:spacer -->\n\n<!-- wp:jgu\/heading {\"tags\":{\"htmlTag\":\"h2\",\"classTag\":\"\",\"tag\":\"h2\"},\"heading\":\"Akkordeon mit im voraus ge\u00f6ffnetem Element\"} \/-->\n\n<!-- wp:paragraph {\"className\":\"has-big-font-size\"} -->\n<p class=\"has-big-font-size\"><strong>Hier kann man nur ein Element \u00f6ffnen<\/strong> und ein Tab ist Standardm\u00e4\u00dfig ausgew\u00e4hlt.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:jgu\/accordion {\"selected\":2,\"hasAllOpenButton\":false,\"onlyOne\":true,\"initAllClosed\":false} -->\n<!-- wp:jgu\/accordion-item {\"title\":\"EINS\",\"init\":false,\"slug\":\"eins\"} -->\n<!-- wp:columns {\"className\":\"alignwide\"} -->\n<div class=\"wp-block-columns alignwide\"><!-- wp:column -->\n<div class=\"wp-block-column\"><\/div>\n<!-- \/wp:column -->\n\n<!-- wp:column -->\n<div class=\"wp-block-column\"><\/div>\n<!-- \/wp:column --><\/div>\n<!-- \/wp:columns -->\n<!-- \/wp:jgu\/accordion-item -->\n\n<!-- wp:jgu\/accordion-item {\"title\":\"ZWEI\",\"init\":false,\"slug\":\"zwei\"} -->\n<!-- wp:paragraph {\"className\":\"has-big-font-size\"} -->\n<p class=\"has-big-font-size\">Das zweite Element ist hier im voraus ge\u00f6ffnet<\/p>\n<!-- \/wp:paragraph -->\n<!-- \/wp:jgu\/accordion-item -->\n<!-- \/wp:jgu\/accordion -->\n\n<!-- wp:jgu\/heading {\"tags\":{\"htmlTag\":\"h2\",\"classTag\":\"\",\"tag\":\"h2\"},\"heading\":\"Akkordeon mit geschlossenen Elementen und Suche\"} \/-->\n\n<!-- wp:jgu\/accordion {\"selected\":3,\"hasAllOpenButton\":false,\"enableSearch\":true} -->\n<!-- wp:jgu\/accordion-item {\"title\":\"Allgemeine Infos\",\"init\":false,\"slug\":\"allgemeine-infos-1\"} -->\n<!-- wp:columns {\"className\":\"alignwide\"} -->\n<div class=\"wp-block-columns alignwide\"><!-- wp:column -->\n<div class=\"wp-block-column\"><!-- wp:paragraph {\"className\":\"has-big-font-size\"} -->\n<p class=\"has-big-font-size\">Ein kleiner Text<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:jgu\/button {\"className\":\"wp-block-jgu-buttons alignwide\"} -->\n<!-- wp:jgu\/button-item {\"text\":\"Test\"} \/-->\n<!-- \/wp:jgu\/button --><\/div>\n<!-- \/wp:column -->\n\n<!-- wp:column -->\n<div class=\"wp-block-column\"><\/div>\n<!-- \/wp:column --><\/div>\n<!-- \/wp:columns -->\n<!-- \/wp:jgu\/accordion-item -->\n\n<!-- wp:jgu\/accordion-item {\"title\":\"Lernen und Arbeiten\",\"init\":false,\"slug\":\"lernen-und-arbeiten-1\"} -->\n<!-- wp:paragraph {\"className\":\"has-big-font-size\"} -->\n<p class=\"has-big-font-size\">Benutzerfreundlich ist, wichtige Suchworte nicht in den Falten zu verstecken. Gehen Sie bei der Wahl der Beschriftung der Akkordeon-Elemente so vor: was w\u00fcrde jemand googeln, der diese Information in der Falte bekommen m\u00f6chte? Diese Stichworte m\u00fcssen in der Benennung stehen.<\/p>\n<!-- \/wp:paragraph -->\n<!-- \/wp:jgu\/accordion-item -->\n\n<!-- wp:jgu\/accordion-item {\"title\":\"Leben\",\"init\":false,\"slug\":\"leben-1\"} -->\n<!-- wp:paragraph {\"className\":\"has-big-font-size\"} -->\n<p class=\"has-big-font-size\">Ein kleiner Text<\/p>\n<!-- \/wp:paragraph -->\n<!-- \/wp:jgu\/accordion-item -->\n\n<!-- wp:jgu\/accordion-item {\"title\":\"Forschen\",\"init\":false,\"slug\":\"forschen-1\"} -->\n<!-- wp:paragraph {\"className\":\"has-big-font-size\"} -->\n<p class=\"has-big-font-size\">Benutzerfreundlich ist, wichtige Suchworte nicht in den Falten zu verstecken. Gehen Sie bei der Wahl der Beschriftung der Akkordeon-Elemente so vor: was w\u00fcrde jemand googeln, der diese Information in der Falte bekommen m\u00f6chte? Diese Stichworte m\u00fcssen in der Benennung stehen.<\/p>\n<!-- \/wp:paragraph -->\n<!-- \/wp:jgu\/accordion-item -->\n<!-- \/wp:jgu\/accordion -->\n\n<!-- wp:spacer {\"height\":\"100px\"} -->\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n<!-- \/wp:spacer -->\n\n<!-- wp:columns {\"className\":\"alignwide\"} -->\n<div class=\"wp-block-columns alignwide\"><!-- wp:column -->\n<div class=\"wp-block-column\"><!-- wp:jgu\/accordion {\"selected\":2,\"hasAllOpenButton\":false} -->\n<!-- wp:jgu\/accordion-item {\"title\":\"Allgemeine Infos\",\"init\":false,\"slug\":\"allgemeine-infos-1\"} -->\n<!-- wp:columns {\"className\":\"alignwide\"} -->\n<div class=\"wp-block-columns alignwide\"><!-- wp:column -->\n<div class=\"wp-block-column\"><!-- wp:paragraph {\"className\":\"has-big-font-size\"} -->\n<p class=\"has-big-font-size\">Ein kleiner Text<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:jgu\/button {\"className\":\"wp-block-jgu-buttons alignwide\"} -->\n<!-- wp:jgu\/button-item {\"text\":\"Test\"} \/-->\n<!-- \/wp:jgu\/button --><\/div>\n<!-- \/wp:column --><\/div>\n<!-- \/wp:columns -->\n<!-- \/wp:jgu\/accordion-item -->\n\n<!-- wp:jgu\/accordion-item {\"title\":\"Lernen und Arbeiten\",\"init\":false,\"slug\":\"lernen-und-arbeiten-1\"} -->\n<!-- wp:paragraph {\"className\":\"has-big-font-size\"} -->\n<p class=\"has-big-font-size\">Ein sehr kleiner Text<\/p>\n<!-- \/wp:paragraph -->\n<!-- \/wp:jgu\/accordion-item -->\n\n<!-- wp:jgu\/accordion-item {\"title\":\"Leben\",\"init\":false,\"slug\":\"leben-1\"} -->\n<!-- wp:paragraph {\"className\":\"has-big-font-size\"} -->\n<p class=\"has-big-font-size\">Benutzerfreundlich ist, wichtige Suchworte nicht in den Falten zu verstecken. Gehen Sie bei der Wahl der Beschriftung der Akkordeon-Elemente so vor: was w\u00fcrde jemand googeln, der diese Information in der Falte bekommen m\u00f6chte? Diese Stichworte m\u00fcssen in der Benennung stehen.<\/p>\n<!-- \/wp:paragraph -->\n<!-- \/wp:jgu\/accordion-item -->\n\n<!-- wp:jgu\/accordion-item {\"title\":\"Forschen\",\"init\":false,\"slug\":\"forschen-1\"} -->\n<!-- wp:paragraph {\"className\":\"has-big-font-size\"} -->\n<p class=\"has-big-font-size\">Dieser Text ist versteckt<\/p>\n<!-- \/wp:paragraph -->\n<!-- \/wp:jgu\/accordion-item -->\n<!-- \/wp:jgu\/accordion --><\/div>\n<!-- \/wp:column -->\n\n<!-- wp:column -->\n<div class=\"wp-block-column\"><!-- wp:paragraph {\"className\":\"has-big-font-size\"} -->\n<p class=\"has-big-font-size\">eine dreigeteilte Spalte. Links ein Akkordeon. Zum Testen wie es mit wenig Platz aussieht<\/p>\n<!-- \/wp:paragraph --><\/div>\n<!-- \/wp:column -->\n\n<!-- wp:column -->\n<div class=\"wp-block-column\"><\/div>\n<!-- \/wp:column --><\/div>\n<!-- \/wp:columns -->","_links":{"self":[{"href":"https:\/\/cms.zdv.uni-mainz.de\/modul-demo\/wp-json\/wp\/v2\/pages\/203","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cms.zdv.uni-mainz.de\/modul-demo\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/cms.zdv.uni-mainz.de\/modul-demo\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/cms.zdv.uni-mainz.de\/modul-demo\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/cms.zdv.uni-mainz.de\/modul-demo\/wp-json\/wp\/v2\/comments?post=203"}],"version-history":[{"count":13,"href":"https:\/\/cms.zdv.uni-mainz.de\/modul-demo\/wp-json\/wp\/v2\/pages\/203\/revisions"}],"predecessor-version":[{"id":119245,"href":"https:\/\/cms.zdv.uni-mainz.de\/modul-demo\/wp-json\/wp\/v2\/pages\/203\/revisions\/119245"}],"wp:attachment":[{"href":"https:\/\/cms.zdv.uni-mainz.de\/modul-demo\/wp-json\/wp\/v2\/media?parent=203"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cms.zdv.uni-mainz.de\/modul-demo\/wp-json\/wp\/v2\/categories?post=203"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cms.zdv.uni-mainz.de\/modul-demo\/wp-json\/wp\/v2\/tags?post=203"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}