{"id":73,"date":"2024-06-03T15:19:57","date_gmt":"2024-06-03T13:19:57","guid":{"rendered":"https:\/\/qala.shop\/documentation\/?page_id=73"},"modified":"2024-06-11T14:14:31","modified_gmt":"2024-06-11T12:14:31","slug":"accordion","status":"publish","type":"page","link":"https:\/\/qala.shop\/documentation\/qala-blocks\/accordion\/","title":{"rendered":"Accordion"},"content":{"rendered":"\n<h1 class=\"wp-block-heading alignwide\" id=\"h-accordion\">Accordion<\/h1>\n\n\n\n<figure class=\"wp-block-video alignwide\"><video controls src=\"https:\/\/www.loom.com\/share\/185e7486f719488ab43634f6e157d54b?sid=7536ce99-e1f0-46f6-8841-b33901c0d714\" playsinline><\/video><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-how-to-use-the-qala-block-accordion\" style=\"margin-top:var(--wp--preset--spacing--80)\">How to use the Qala block &#8220;Accordion&#8221;<\/h3>\n\n\n\n<p>To add the Qala block, press the plus icon. Then Browse all.<\/p>\n\n\n\n<p>You can either scroll down to the section with Qala blocks, or you can just write the name of the block in the search area. Choose \u201cAccordion\u201d.<\/p>\n\n\n\n<p>In the top section, write your heading. It may be a title or a question. Underneath, you add your content. This will be all text based.<\/p>\n\n\n\n<p>To add a new accordion, it is easiest to duplicate your existing one and replace the content. Press the three dots, and choose Duplicate. You can also add the block by pressing the plus icon and find it by searching again.<\/p>\n\n\n\n<p>To the right, you will see your settings. If they are hidden, you can press the icon next to Publish. Make sure you have the Block tab open, not Page.<\/p>\n\n\n\n<p>In these settings you have the option to style the text and add an icon. In this case, upload an svg file.&nbsp;<\/p>\n\n\n\n<p>To style all your accordions the same way, go to your left and press the slanted hamburger menu. Select all accordion layers by holding down shift. Then you can style all of them at once. You will have to change the icon to each individual accordion.&nbsp;<\/p>\n\n\n\n<p>On the frond-end, the answers (or the content) will be collapsed by default. When you press the heading, the answer will toggle below.<\/p>\n\n\n\n<div style=\"height:62px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div class=\"wp-block-group alignfull has-primary-100-background-color has-background is-layout-constrained wp-block-group-is-layout-constrained\">\n<div class=\"wp-block-group alignwide is-layout-constrained wp-block-group-is-layout-constrained\">\n<div style=\"height:46px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading alignwide\" id=\"h-summary\">Summary<\/h2>\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\">\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1715\" height=\"831\" src=\"https:\/\/qala.shop\/documentation\/wp-content\/uploads\/sites\/6\/2024\/06\/acc-01-screenshots.png\" alt=\"acc-01-screenshots\" class=\"wp-image-145\" srcset=\"https:\/\/qala.shop\/documentation\/wp-content\/uploads\/sites\/6\/2024\/06\/acc-01-screenshots.png 1715w, https:\/\/qala.shop\/documentation\/wp-content\/uploads\/sites\/6\/2024\/06\/acc-01-screenshots-300x145.png 300w, https:\/\/qala.shop\/documentation\/wp-content\/uploads\/sites\/6\/2024\/06\/acc-01-screenshots-1024x496.png 1024w, https:\/\/qala.shop\/documentation\/wp-content\/uploads\/sites\/6\/2024\/06\/acc-01-screenshots-768x372.png 768w, https:\/\/qala.shop\/documentation\/wp-content\/uploads\/sites\/6\/2024\/06\/acc-01-screenshots-1536x744.png 1536w, https:\/\/qala.shop\/documentation\/wp-content\/uploads\/sites\/6\/2024\/06\/acc-01-screenshots-266x129.png 266w, https:\/\/qala.shop\/documentation\/wp-content\/uploads\/sites\/6\/2024\/06\/acc-01-screenshots-600x291.png 600w\" sizes=\"auto, (max-width: 1715px) 100vw, 1715px\" \/><\/figure>\n\n\n\n<p>Add the Qala block Accordion<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1715\" height=\"831\" src=\"https:\/\/qala.shop\/documentation\/wp-content\/uploads\/sites\/6\/2024\/06\/acc-02-screenshots.png\" alt=\"acc-02-screenshots\" class=\"wp-image-144\" srcset=\"https:\/\/qala.shop\/documentation\/wp-content\/uploads\/sites\/6\/2024\/06\/acc-02-screenshots.png 1715w, https:\/\/qala.shop\/documentation\/wp-content\/uploads\/sites\/6\/2024\/06\/acc-02-screenshots-300x145.png 300w, https:\/\/qala.shop\/documentation\/wp-content\/uploads\/sites\/6\/2024\/06\/acc-02-screenshots-1024x496.png 1024w, https:\/\/qala.shop\/documentation\/wp-content\/uploads\/sites\/6\/2024\/06\/acc-02-screenshots-768x372.png 768w, https:\/\/qala.shop\/documentation\/wp-content\/uploads\/sites\/6\/2024\/06\/acc-02-screenshots-1536x744.png 1536w, https:\/\/qala.shop\/documentation\/wp-content\/uploads\/sites\/6\/2024\/06\/acc-02-screenshots-266x129.png 266w, https:\/\/qala.shop\/documentation\/wp-content\/uploads\/sites\/6\/2024\/06\/acc-02-screenshots-600x291.png 600w\" sizes=\"auto, (max-width: 1715px) 100vw, 1715px\" \/><\/figure>\n\n\n\n<p>Add title and content for Accordions<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1715\" height=\"831\" src=\"https:\/\/qala.shop\/documentation\/wp-content\/uploads\/sites\/6\/2024\/06\/acc-03-screenshots.png\" alt=\"acc-03-screenshots\" class=\"wp-image-143\" srcset=\"https:\/\/qala.shop\/documentation\/wp-content\/uploads\/sites\/6\/2024\/06\/acc-03-screenshots.png 1715w, https:\/\/qala.shop\/documentation\/wp-content\/uploads\/sites\/6\/2024\/06\/acc-03-screenshots-300x145.png 300w, https:\/\/qala.shop\/documentation\/wp-content\/uploads\/sites\/6\/2024\/06\/acc-03-screenshots-1024x496.png 1024w, https:\/\/qala.shop\/documentation\/wp-content\/uploads\/sites\/6\/2024\/06\/acc-03-screenshots-768x372.png 768w, https:\/\/qala.shop\/documentation\/wp-content\/uploads\/sites\/6\/2024\/06\/acc-03-screenshots-1536x744.png 1536w, https:\/\/qala.shop\/documentation\/wp-content\/uploads\/sites\/6\/2024\/06\/acc-03-screenshots-266x129.png 266w, https:\/\/qala.shop\/documentation\/wp-content\/uploads\/sites\/6\/2024\/06\/acc-03-screenshots-600x291.png 600w\" sizes=\"auto, (max-width: 1715px) 100vw, 1715px\" \/><\/figure>\n\n\n\n<p>Style your Accordions<\/p>\n<\/div>\n<\/div>\n\n\n\n<div style=\"height:46px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns alignwide is-layout-flex wp-container-core-columns-is-layout-2a07215d wp-block-columns-is-layout-flex\" style=\"margin-bottom:0;padding-top:0\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<div style=\"height:46px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-related-qala-blocks\">Related Qala blocks<\/h2>\n<\/div>\n<\/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\">\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1528\" height=\"778\" src=\"https:\/\/qala.shop\/documentation\/wp-content\/uploads\/sites\/6\/2024\/06\/single-testimonial.png\" alt=\"single-testimonial\" class=\"wp-image-124\" srcset=\"https:\/\/qala.shop\/documentation\/wp-content\/uploads\/sites\/6\/2024\/06\/single-testimonial.png 1528w, https:\/\/qala.shop\/documentation\/wp-content\/uploads\/sites\/6\/2024\/06\/single-testimonial-300x153.png 300w, https:\/\/qala.shop\/documentation\/wp-content\/uploads\/sites\/6\/2024\/06\/single-testimonial-1024x521.png 1024w, https:\/\/qala.shop\/documentation\/wp-content\/uploads\/sites\/6\/2024\/06\/single-testimonial-768x391.png 768w, https:\/\/qala.shop\/documentation\/wp-content\/uploads\/sites\/6\/2024\/06\/single-testimonial-266x135.png 266w, https:\/\/qala.shop\/documentation\/wp-content\/uploads\/sites\/6\/2024\/06\/single-testimonial-600x305.png 600w\" sizes=\"auto, (max-width: 1528px) 100vw, 1528px\" \/><\/figure>\n\n\n\n<p class=\"has-medium-font-size\"><strong>Single testimonial<\/strong><\/p>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button is-style-primary-underline wp-block-button is-style-primary-underline\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/qala.shop\/documentation\/qala-blocks\/single-testimonial\/\">Read more<\/a><\/div>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1528\" height=\"876\" src=\"https:\/\/qala.shop\/documentation\/wp-content\/uploads\/sites\/6\/2024\/06\/faq-list.png\" alt=\"faq-list\" class=\"wp-image-116\" srcset=\"https:\/\/qala.shop\/documentation\/wp-content\/uploads\/sites\/6\/2024\/06\/faq-list.png 1528w, https:\/\/qala.shop\/documentation\/wp-content\/uploads\/sites\/6\/2024\/06\/faq-list-300x172.png 300w, https:\/\/qala.shop\/documentation\/wp-content\/uploads\/sites\/6\/2024\/06\/faq-list-1024x587.png 1024w, https:\/\/qala.shop\/documentation\/wp-content\/uploads\/sites\/6\/2024\/06\/faq-list-768x440.png 768w, https:\/\/qala.shop\/documentation\/wp-content\/uploads\/sites\/6\/2024\/06\/faq-list-266x152.png 266w, https:\/\/qala.shop\/documentation\/wp-content\/uploads\/sites\/6\/2024\/06\/faq-list-600x344.png 600w\" sizes=\"auto, (max-width: 1528px) 100vw, 1528px\" \/><\/figure>\n\n\n\n<p class=\"has-medium-font-size\"><strong>FAQ list<\/strong><\/p>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button is-style-primary-underline wp-block-button is-style-primary-underline\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/qala.shop\/documentation\/qala-blocks\/faq-list\/\">Read more<\/a><\/div>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1528\" height=\"889\" src=\"https:\/\/qala.shop\/documentation\/wp-content\/uploads\/sites\/6\/2024\/06\/multi-image-accordion.png\" alt=\"multi-image-accordion\" class=\"wp-image-120\" srcset=\"https:\/\/qala.shop\/documentation\/wp-content\/uploads\/sites\/6\/2024\/06\/multi-image-accordion.png 1528w, https:\/\/qala.shop\/documentation\/wp-content\/uploads\/sites\/6\/2024\/06\/multi-image-accordion-300x175.png 300w, https:\/\/qala.shop\/documentation\/wp-content\/uploads\/sites\/6\/2024\/06\/multi-image-accordion-1024x596.png 1024w, https:\/\/qala.shop\/documentation\/wp-content\/uploads\/sites\/6\/2024\/06\/multi-image-accordion-768x447.png 768w, https:\/\/qala.shop\/documentation\/wp-content\/uploads\/sites\/6\/2024\/06\/multi-image-accordion-266x155.png 266w, https:\/\/qala.shop\/documentation\/wp-content\/uploads\/sites\/6\/2024\/06\/multi-image-accordion-600x349.png 600w\" sizes=\"auto, (max-width: 1528px) 100vw, 1528px\" \/><\/figure>\n\n\n\n<p class=\"has-medium-font-size\"><strong>Multi image Accordion<\/strong><\/p>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button is-style-primary-underline wp-block-button is-style-primary-underline\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/qala.shop\/documentation\/qala-blocks\/multi-image-accordion\/\">Read more<\/a><\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<div style=\"height:75px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Accordion. How to use the Qala block &#8220;Accordion&#8221;. To add the Qala block press the plus icon<\/p>\n","protected":false},"author":197,"featured_media":0,"parent":50,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"_trash_the_other_posts":false,"editor_notices":[],"footnotes":""},"class_list":["post-73","page","type-page","status-publish","hentry"],"acf":[],"parents":[{"permalink":"https:\/\/qala.shop\/documentation","title":"Home"},{"permalink":"https:\/\/qala.shop\/documentation\/qala-blocks\/","title":"Qala blocks"},{"permalink":false,"title":"Accordion"}],"_links":{"self":[{"href":"https:\/\/qala.shop\/documentation\/wp-json\/wp\/v2\/pages\/73","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/qala.shop\/documentation\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/qala.shop\/documentation\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/qala.shop\/documentation\/wp-json\/wp\/v2\/users\/197"}],"replies":[{"embeddable":true,"href":"https:\/\/qala.shop\/documentation\/wp-json\/wp\/v2\/comments?post=73"}],"version-history":[{"count":3,"href":"https:\/\/qala.shop\/documentation\/wp-json\/wp\/v2\/pages\/73\/revisions"}],"predecessor-version":[{"id":146,"href":"https:\/\/qala.shop\/documentation\/wp-json\/wp\/v2\/pages\/73\/revisions\/146"}],"up":[{"embeddable":true,"href":"https:\/\/qala.shop\/documentation\/wp-json\/wp\/v2\/pages\/50"}],"wp:attachment":[{"href":"https:\/\/qala.shop\/documentation\/wp-json\/wp\/v2\/media?parent=73"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}