{"id":129022,"date":"2022-11-16T17:27:03","date_gmt":"2022-11-16T16:27:03","guid":{"rendered":"https:\/\/www.justinmind.com\/blog\/how-to-create-an-accordion\/"},"modified":"2025-02-13T19:14:17","modified_gmt":"2025-02-13T18:14:17","slug":"how-to-create-an-accordion","status":"publish","type":"post","link":"https:\/\/www.justinmind.com\/de\/hilfe\/akkordeon-designt","title":{"rendered":"Wie man ein Akkordeon designt"},"content":{"rendered":"<p><span style=\"font-weight: 400;\">In diesem Artikel erfahren Sie, wie Sie ein Akkordeon erstellen k\u00f6nnen.<\/span><\/p>\n<p><iframe loading=\"lazy\" src=\"https:\/\/www.justinmind.com\/usernote\/tests\/23518471\/73112233\/73154072\/index.html\" width=\"820px\" height=\"635px\" frameborder=\"0\"><\/iframe><\/p>\n<p><span style=\"font-weight: 400;\">So bauen Sie es auf:<\/span><\/p>\n<h3><strong>Siehe<\/strong><\/h3>\n<ul>\n<li>W\u00e4hlen Sie &#8222;Dynamisches Panel&#8220; aus dem Bereich Dynamischer Inhalt und platzieren Sie es auf der Leinwand. Gehen Sie dann zur Palette Eigenschaften und stellen Sie das Layout des Panels auf &#8222;Vertikal&#8220;.<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-70603\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2022\/10\/create-an-accordion-1.png\" alt=\"acc 1\" width=\"1215\" height=\"753\"><\/li>\n<li>Platzieren Sie ein zweites &#8222;Dynamisches Panel&#8220; auf der Leinwand. W\u00e4hlen Sie dann ein &#8222;Rechteck&#8220; aus und platzieren Sie es bei gedr\u00fcckter Befehlstaste (Mac) bzw. Steuerungstaste (Windows) innerhalb des neuen Panels, \u00e4ndern Sie die Gr\u00f6\u00dfe und Form des Rechtecks, um eine Kopfzeile zu simulieren, und platzieren Sie einen Pfeil auf der linken Seite.<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-70603\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2022\/10\/create-an-accordion-2.png\" alt=\"acc 1\" width=\"1215\" height=\"753\"><\/li>\n<li>In Ihrem Panel k\u00f6nnen Sie unterhalb der Kopfzeile die Informationen\/Bilder\/Elemente festlegen, die Sie anzeigen m\u00f6chten. Klicken Sie dann auf das Panel und die Regeln f\u00fcr die Gr\u00f6\u00dfenanpassung werden angezeigt. Schieben Sie die Schaltfl\u00e4che nach oben, bis die Informationen verdeckt sind und das Panel nur noch die Kopfzeile anzeigt.<video class=\"lazyload\" style=\"max-width: 820px; width: 100%; padding: 20px 0px;\" preload=\"auto\" loop=\"loop\" muted=\"\" width=\"100%\" height=\"100%\" data-autoplay=\"\" data-poster=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/10\/create-an-accordion-3.png\"><source src=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/10\/create-an-accordion-3.mp4\" type=\"video\/mp4\"><img decoding=\"async\" src=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/10\/create-an-accordion-3.png\" alt=\"Ein Akkordeon erstellen 3\">Ein Akkordeon erstellen 3<\/source><\/video><\/li>\n<li>Halten Sie die Befehlstaste (Mac) bzw. die Steuerungstaste (Windows) gedr\u00fcckt und ziehen Sie den zweiten Bereich in den ersten Bereich. Sie sehen eine blaue F\u00e4rbung, wenn Sie das Element hineinziehen; dies simuliert ein Element in Ihrem Akkordeon. <video class=\"lazyload\" style=\"max-width: 820px; width: 100%; padding: 20px 0px;\" preload=\"auto\" loop=\"loop\" muted=\"\" width=\"100%\" height=\"100%\" data-autoplay=\"\" data-poster=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/10\/create-an-accordion-4.png\"><source src=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/10\/create-an-accordion-4.mp4\" type=\"video\/mp4\"><img decoding=\"async\" src=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/10\/create-an-accordion-4.png\" alt=\"Ein Akkordeon erstellen 4\">Ein Akkordeon erstellen 4<\/source><\/video><\/li>\n<li>Wiederholen Sie die Aktionen, um weitere Optionen zu erstellen und platzieren Sie diese untereinander im ersten Panel.<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-70603\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2022\/10\/create-an-accordion-5.png\" alt=\"acc 1\" width=\"1215\" height=\"753\"><\/li>\n<\/ul>\n<h3><strong>Ereignisse<\/strong><\/h3>\n<p><span data-preserver-spaces=\"true\">W\u00e4hlen Sie das erste &#8222;Rechteck&#8220; aus, gehen Sie zur Palette &#8222;Ereignisse&#8220; und klicken Sie auf &#8222;Ereignis hinzuf\u00fcgen&#8220;.&nbsp;<\/span><\/p>\n<ol>\n<li><span data-preserver-spaces=\"true\">Klicken Sie in dem Dialogfenster auf &#8222;Ausl\u00f6ser w\u00e4hlen&#8220;, bewegen Sie den Mauszeiger \u00fcber den Abschnitt &#8222;Maus&#8220; und w\u00e4hlen Sie &#8222;bei Umschalten&#8220;.<\/span><\/li>\n<li><span data-preserver-spaces=\"true\">W\u00e4hlen Sie unter &#8222;Aktion ausw\u00e4hlen&#8220; die Option &#8222;Elementgr\u00f6\u00dfe \u00e4ndern&#8220; und vergewissern Sie sich, dass das Panel mit Ihrem ersten Element ausgew\u00e4hlt ist.<\/span><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-70603\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2022\/10\/create-an-accordion-6.png\" alt=\"acc 1\" width=\"1215\" height=\"753\"><\/li>\n<\/ol>\n<p><span data-preserver-spaces=\"true\">W\u00e4hlen Sie f\u00fcr den Wert &#8222;Fest&#8220; und passen Sie den Wert nur f\u00fcr die H\u00f6he an; hier m\u00fcssen Sie die Gr\u00f6\u00dfe erh\u00f6hen, um alle Informationen in Ihrem Panel anzuzeigen.  <\/span><span data-preserver-spaces=\"true\">Klicken Sie auf &#8222;Ok&#8220;, um die Erstellung des Ereignisses abzuschlie\u00dfen.<\/span><\/p>\n<p><span data-preserver-spaces=\"true\">Gehen Sie zur Palette Ereignisse und klicken Sie auf das &#8222;+&#8220;, um ein neues Ereignis hinzuzuf\u00fcgen.<\/span><\/p>\n<ol>\n<li><span data-preserver-spaces=\"true\">Klicken Sie in dem Dialogfenster auf &#8222;Ausl\u00f6ser w\u00e4hlen&#8220;, bewegen Sie den Mauszeiger \u00fcber den Abschnitt &#8222;Maus&#8220; und w\u00e4hlen Sie &#8222;bei Umschalten&#8220;.<\/span><\/li>\n<li><span data-preserver-spaces=\"true\">W\u00e4hlen Sie unter &#8222;Aktion w\u00e4hlen&#8220; die Option &#8222;Element drehen&#8220; und klicken Sie auf den Pfeil.  <\/span><\/li>\n<li>W\u00e4hlen Sie f\u00fcr den Wert die Option &#8222;Fest&#8220; 180\u00b0. Klicken Sie auf &#8222;Ok&#8220;, um die Erstellung Ihres Ereignisses abzuschlie\u00dfen. <img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-70603\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2022\/10\/create-an-accordion-7.png\" alt=\"acc 1\" width=\"1215\" height=\"753\"><\/li>\n<\/ol>\n<p>Gehen Sie bei ausgew\u00e4hltem &#8222;Rechteck&#8220; zur Palette &#8222;Ereignisse&#8220; und klicken Sie auf &#8222;Alle Ereignisse kopieren&#8220;.<br \/>\nW\u00e4hlen Sie das n\u00e4chste Rechteck (Option 2) und f\u00fcgen Sie alle Ereignisse ein; bearbeiten Sie die Ereignisse, um das Ziel umzuleiten und passen Sie die Gr\u00f6\u00dfe und Drehung an.<br \/>\nWiederholen Sie den Vorgang mit den \u00fcbrigen &#8222;Optionen&#8220;.<\/p>\n<div class=\"embed-container\" style=\"padding-bottom: 57%;\"><iframe loading=\"lazy\" src=\"https:\/\/player.vimeo.com\/video\/762571040\" width=\"640\" height=\"564\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/div>\n<p><span data-preserver-spaces=\"true\">Simulieren Sie Ihren Prototyp.<\/span><\/p>\n","protected":false},"excerpt":{"rendered":"<p>In diesem Artikel erfahren Sie, wie Sie ein Akkordeon erstellen k\u00f6nnen. So bauen Sie es auf: Siehe W\u00e4hlen Sie &#8222;Dynamisches Panel&#8220; aus dem Bereich Dynamischer Inhalt&#8230;<\/p>\n","protected":false},"author":20,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"categories":[8557,8548],"tags":[],"class_list":["post-129022","post","type-post","status-publish","format-standard","hentry","category-erweiterte-komponenten","category-erweiterte-anleitungen"],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.justinmind.com\/de\/wp-json\/wp\/v2\/posts\/129022"}],"collection":[{"href":"https:\/\/www.justinmind.com\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.justinmind.com\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.justinmind.com\/de\/wp-json\/wp\/v2\/users\/20"}],"replies":[{"embeddable":true,"href":"https:\/\/www.justinmind.com\/de\/wp-json\/wp\/v2\/comments?post=129022"}],"version-history":[{"count":1,"href":"https:\/\/www.justinmind.com\/de\/wp-json\/wp\/v2\/posts\/129022\/revisions"}],"predecessor-version":[{"id":129234,"href":"https:\/\/www.justinmind.com\/de\/wp-json\/wp\/v2\/posts\/129022\/revisions\/129234"}],"wp:attachment":[{"href":"https:\/\/www.justinmind.com\/de\/wp-json\/wp\/v2\/media?parent=129022"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.justinmind.com\/de\/wp-json\/wp\/v2\/categories?post=129022"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.justinmind.com\/de\/wp-json\/wp\/v2\/tags?post=129022"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}