{"id":5306,"date":"2023-08-24T20:00:13","date_gmt":"2023-08-24T18:00:13","guid":{"rendered":"https:\/\/ekiwi.de\/index.php\/5306\/magix-webdesigner-accordion-for-website\/"},"modified":"2023-08-25T19:45:56","modified_gmt":"2023-08-25T17:45:56","slug":"magix-webdesigner-accordion-for-website","status":"publish","type":"post","link":"https:\/\/ekiwi.de\/en\/index.php\/5306\/magix-webdesigner-accordion-for-website\/","title":{"rendered":"Xara Webdesigner: Accordion for website"},"content":{"rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_82_2 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of content<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/ekiwi.de\/en\/index.php\/5306\/magix-webdesigner-accordion-for-website\/#Instruction_video\" >Instruction video<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/ekiwi.de\/en\/index.php\/5306\/magix-webdesigner-accordion-for-website\/#The_script\" >The script<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/ekiwi.de\/en\/index.php\/5306\/magix-webdesigner-accordion-for-website\/#Include_HEAD_and_BODY_code\" >Include HEAD and BODY code<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/ekiwi.de\/en\/index.php\/5306\/magix-webdesigner-accordion-for-website\/#Include_Accordion\" >Include Accordion<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/ekiwi.de\/en\/index.php\/5306\/magix-webdesigner-accordion-for-website\/#Finished\" >Finished!<\/a><\/li><\/ul><\/nav><\/div>\n<p>Inserting an Accordion in Xara Webdesigner, that&#8217;s how it works.<\/p>\n<p><!--more--><\/p>\n<h2><span class=\"ez-toc-section\" id=\"Instruction_video\"><\/span>Instruction video<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><iframe loading=\"lazy\" width=\"560\" height=\"315\" src=\"https:\/\/www.youtube.com\/embed\/nK5eo1ffiKI?si=AwF2Xvd1hPboB6hk\" title=\"YouTube video player\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" allowfullscreen><\/iframe><\/p>\n<h2><span class=\"ez-toc-section\" id=\"The_script\"><\/span>The script<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>OK, let&#8217;s get straight into it. We use a small ready-made script, which we can find here at <a href=\"https:\/\/www.w3schools.com\/howto\/tryit.asp?filename=tryhow_js_accordion_symbol\">W3Schools<\/a>. Here we can also adapt it directly in the browser and test it before we apply the code.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Include_HEAD_and_BODY_code\"><\/span>Include HEAD and BODY code<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Let&#8217;s start by embedding the CSS and script code from the script. To do this, we call up the web properties.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"\/wp-content\/uploads\/2023\/08\/accordion_1.png\" alt=\"\" width=\"328\" height=\"126\" class=\"alignnone size-full wp-image-5292\" srcset=\"\/wp-content\/uploads\/2023\/08\/accordion_1.png 328w, \/wp-content\/uploads\/2023\/08\/accordion_1-300x115.png 300w\" sizes=\"auto, (max-width: 328px) 100vw, 328px\" \/><\/p>\n<p>In the tab &#8220;Website&#8221; we find the two buttons for the body and head code. We start with the head code. We copy the marked part of the script, copy it and paste it again. In this area, adjustments can also be made to the design.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"\/wp-content\/uploads\/2023\/08\/accordion_2.png\" alt=\"\" width=\"944\" height=\"653\" class=\"alignnone size-full wp-image-5294\" srcset=\"\/wp-content\/uploads\/2023\/08\/accordion_2.png 944w, \/wp-content\/uploads\/2023\/08\/accordion_2-300x208.png 300w, \/wp-content\/uploads\/2023\/08\/accordion_2-768x531.png 768w\" sizes=\"auto, (max-width: 944px) 100vw, 944px\" \/><\/p>\n<p>We do the same for the body code, we just copy everything with the script. In contrast to the CSS code, we don&#8217;t adjust anything here.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"\/wp-content\/uploads\/2023\/08\/accordion_3.png\" alt=\"\" width=\"861\" height=\"412\" class=\"alignnone size-full wp-image-5296\" srcset=\"\/wp-content\/uploads\/2023\/08\/accordion_3.png 861w, \/wp-content\/uploads\/2023\/08\/accordion_3-300x144.png 300w, \/wp-content\/uploads\/2023\/08\/accordion_3-768x367.png 768w\" sizes=\"auto, (max-width: 861px) 100vw, 861px\" \/><\/p>\n<h2><span class=\"ez-toc-section\" id=\"Include_Accordion\"><\/span>Include Accordion<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Now we include the actual Accordion. To do this, we have to include HTML code in the web page. To do this, we insert a placeholder.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"\/wp-content\/uploads\/2023\/08\/accordion_4.png\" alt=\"\" width=\"969\" height=\"512\" class=\"alignnone size-full wp-image-5298\" srcset=\"\/wp-content\/uploads\/2023\/08\/accordion_4.png 969w, \/wp-content\/uploads\/2023\/08\/accordion_4-300x159.png 300w, \/wp-content\/uploads\/2023\/08\/accordion_4-768x406.png 768w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/><\/p>\n<p>Then we edit the properties of the placeholder. We edit the &#8220;HTML code (body)&#8221; in the &#8220;Placeholder&#8221; tab.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"\/wp-content\/uploads\/2023\/08\/accordion_5.png\" alt=\"\" width=\"999\" height=\"482\" class=\"alignnone size-full wp-image-5300\" srcset=\"\/wp-content\/uploads\/2023\/08\/accordion_5.png 999w, \/wp-content\/uploads\/2023\/08\/accordion_5-300x145.png 300w, \/wp-content\/uploads\/2023\/08\/accordion_5-768x371.png 768w\" sizes=\"auto, (max-width: 999px) 100vw, 999px\" \/><\/p>\n<p>Here we insert the HTML code of the Accordion. We adjust texts and headings, new elements can also be added here. I think a quick look at the HTML code shows how an element is structured.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"\/wp-content\/uploads\/2023\/08\/accordion_6.png\" alt=\"\" width=\"815\" height=\"318\" class=\"alignnone size-full wp-image-5302\" srcset=\"\/wp-content\/uploads\/2023\/08\/accordion_6.png 815w, \/wp-content\/uploads\/2023\/08\/accordion_6-300x117.png 300w, \/wp-content\/uploads\/2023\/08\/accordion_6-768x300.png 768w\" sizes=\"auto, (max-width: 815px) 100vw, 815px\" \/><\/p>\n<h2><span class=\"ez-toc-section\" id=\"Finished\"><\/span>Finished!<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>That&#8217;s it, now we go to the preview, our Accordion is displayed. If necessary, we still have to adjust the size of the placeholder so that everything is displayed. But otherwise it should run directly.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"\/wp-content\/uploads\/2023\/08\/accordion_7.png\" alt=\"\" width=\"869\" height=\"412\" class=\"alignnone size-full wp-image-5304\" srcset=\"\/wp-content\/uploads\/2023\/08\/accordion_7.png 869w, \/wp-content\/uploads\/2023\/08\/accordion_7-300x142.png 300w, \/wp-content\/uploads\/2023\/08\/accordion_7-768x364.png 768w\" sizes=\"auto, (max-width: 869px) 100vw, 869px\" \/><\/p>","protected":false},"excerpt":{"rendered":"<p>Inserting an Accordion in Xara Webdesigner, that&#8217;s how it works.<\/p>\n","protected":false},"author":1,"featured_media":3086,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_links_to":"","_links_to_target":""},"categories":[879,881],"tags":[1028,1029],"class_list":["post-5306","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-html-and-css","category-javascript-en","tag-magix-en","tag-xara-en"],"_links":{"self":[{"href":"https:\/\/ekiwi.de\/en\/index.php\/wp-json\/wp\/v2\/posts\/5306","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ekiwi.de\/en\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ekiwi.de\/en\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ekiwi.de\/en\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ekiwi.de\/en\/index.php\/wp-json\/wp\/v2\/comments?post=5306"}],"version-history":[{"count":0,"href":"https:\/\/ekiwi.de\/en\/index.php\/wp-json\/wp\/v2\/posts\/5306\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/ekiwi.de\/en\/index.php\/wp-json\/wp\/v2\/media\/3086"}],"wp:attachment":[{"href":"https:\/\/ekiwi.de\/en\/index.php\/wp-json\/wp\/v2\/media?parent=5306"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ekiwi.de\/en\/index.php\/wp-json\/wp\/v2\/categories?post=5306"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ekiwi.de\/en\/index.php\/wp-json\/wp\/v2\/tags?post=5306"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}