{"id":567,"date":"2021-10-08T10:53:29","date_gmt":"2021-10-08T10:53:29","guid":{"rendered":"https:\/\/spyrowptheme.com\/documentation\/?page_id=567"},"modified":"2021-10-08T10:53:30","modified_gmt":"2021-10-08T10:53:30","slug":"spyro-accordion","status":"publish","type":"page","link":"https:\/\/spyrowptheme.com\/documentation\/spyro-accordion\/","title":{"rendered":"Spyro Accordion"},"content":{"rendered":"<div  class=\"tatsu-Sy-6jyo64Y tatsu-section  tatsu-bg-overlay   tatsu-clearfix\" data-title=\"\"  data-headerscheme=\"background--dark\"><div class='tatsu-section-pad clearfix' data-padding='{\"d\":\"90px 0px 90px 0px\"}' data-padding-top='90px'><div class=\"tatsu-row-wrap  tatsu-wrap tatsu-row-has-two-cols tatsu-medium-gutter tatsu-reg-cols  tatsu-clearfix tatsu-r1lTjJjaNK\" ><div  class=\"tatsu-row \" ><div  class=\"tatsu-column  tatsu-bg-overlay tatsu-one-fourth tatsu-column-image-none tatsu-column-effect-none  tatsu-S1g3JiT4K\"  data-parallax-speed=\"0\" style=\"\"><div class=\"tatsu-column-inner \" ><div class=\"tatsu-column-pad-wrap\"><div class=\"tatsu-column-pad\" ><div  class=\"tatsu-module tatsu-sidebar tatsu-Skq2yipVY   \"  ><div class=\"widget_nav_menu widget\"><h6>Related Articles<\/h6><div class=\"menu-others-container\"><ul id=\"menu-others\" class=\"menu\"><li id=\"menu-item-594\" class=\"menu-item menu-item-type-post_type menu-item-object-page menu-item-594\"><a href=\"https:\/\/spyrowptheme.com\/documentation\/list-of-articles-others\/404-error-after-demo-import\/\" title=\"404 Error after Demo Import\">404 Error after Demo Import<\/a><\/li>\n<li id=\"menu-item-538\" class=\"menu-item menu-item-type-post_type menu-item-object-page menu-item-538\"><a href=\"https:\/\/spyrowptheme.com\/documentation\/list-of-articles-others\/site-performance\/\" title=\"Site Performance\">Site Performance<\/a><\/li>\n<li id=\"menu-item-536\" class=\"menu-item menu-item-type-post_type menu-item-object-page menu-item-536\"><a href=\"https:\/\/spyrowptheme.com\/documentation\/list-of-articles-others\/multi-language-support\/\" title=\"Multi Language Support\">Multi Language Support<\/a><\/li>\n<li id=\"menu-item-537\" class=\"menu-item menu-item-type-post_type menu-item-object-page menu-item-537\"><a href=\"https:\/\/spyrowptheme.com\/documentation\/list-of-articles-others\/site-translation\/\" title=\"Site Translation\">Site Translation<\/a><\/li>\n<li id=\"menu-item-540\" class=\"menu-item menu-item-type-post_type menu-item-object-page menu-item-540\"><a href=\"https:\/\/spyrowptheme.com\/documentation\/list-of-articles-others\/set-up-single-page-site\/\" title=\"Set up Single Page Site\">Set up Single Page Site<\/a><\/li>\n<li id=\"menu-item-534\" class=\"menu-item menu-item-type-post_type menu-item-object-page menu-item-534\"><a href=\"https:\/\/spyrowptheme.com\/documentation\/list-of-articles-others\/update-theme\/\" title=\"Update Theme\">Update Theme<\/a><\/li>\n<li id=\"menu-item-535\" class=\"menu-item menu-item-type-post_type menu-item-object-page menu-item-535\"><a href=\"https:\/\/spyrowptheme.com\/documentation\/list-of-articles-others\/update-plugins\/\" title=\"Update Plugins\">Update Plugins<\/a><\/li>\n<li id=\"menu-item-550\" class=\"menu-item menu-item-type-post_type menu-item-object-page menu-item-550\"><a href=\"https:\/\/spyrowptheme.com\/documentation\/list-of-articles-others\/change-log\/\" title=\"Change Log\">Change Log<\/a><\/li>\n<li id=\"menu-item-542\" class=\"menu-item menu-item-type-post_type menu-item-object-page menu-item-542\"><a href=\"https:\/\/spyrowptheme.com\/documentation\/list-of-articles-others\/typehub\/\" title=\"Typehub\">Typehub<\/a><\/li>\n<li id=\"menu-item-541\" class=\"menu-item menu-item-type-post_type menu-item-object-page menu-item-541\"><a href=\"https:\/\/spyrowptheme.com\/documentation\/list-of-articles-others\/colorhub\/\" title=\"Colorhub\">Colorhub<\/a><\/li>\n<\/ul><\/div><\/div><\/div><\/div><\/div><div class = \"tatsu-column-bg-image-wrap\"><div class = \"tatsu-column-bg-image\" ><\/div><\/div><div class=\"tatsu-overlay tatsu-column-overlay tatsu-animate-none\" ><\/div><\/div><style>.tatsu-row > .tatsu-S1g3JiT4K.tatsu-column{width: 25%;}.tatsu-S1g3JiT4K.tatsu-column > .tatsu-column-inner > .tatsu-column-overlay{mix-blend-mode: normal;}.tatsu-S1g3JiT4K > .tatsu-column-inner > .tatsu-top-divider{z-index: 9999;}.tatsu-S1g3JiT4K > .tatsu-column-inner > .tatsu-bottom-divider{z-index: 9999;}.tatsu-S1g3JiT4K > .tatsu-column-inner > .tatsu-left-divider{z-index: 9999;}.tatsu-S1g3JiT4K > .tatsu-column-inner > .tatsu-right-divider{z-index: 9999;}@media only screen and (max-width:1377px) {.tatsu-row > .tatsu-S1g3JiT4K.tatsu-column{width: 25%;}}@media only screen and (min-width:768px) and (max-width: 1024px) {.tatsu-row > .tatsu-S1g3JiT4K.tatsu-column{width: 25%;}}@media only screen and (max-width: 767px) {.tatsu-row > .tatsu-S1g3JiT4K.tatsu-column{width: 100%;}}<\/style><\/div><div  class=\"tatsu-column  tatsu-bg-overlay tatsu-three-fourth tatsu-column-image-none tatsu-column-effect-none  tatsu-HJeenkspVK\"  data-parallax-speed=\"0\" style=\"\"><div class=\"tatsu-column-inner \" ><div class=\"tatsu-column-pad-wrap\"><div class=\"tatsu-column-pad\" ><div  class=\"tatsu-module tatsu-inline-text clearfix tatsu-Bkxp1spNY   \" ><style>.tatsu-Bkxp1spNY .tatsu-inline-text-inner{width: 100%;text-align: left;}@media only screen and (max-width: 767px) {.tatsu-Bkxp1spNY .tatsu-inline-text-inner{width: 100%;}}<\/style><div class=\"tatsu-inline-text-inner tatsu-align-center\">\n<p><a href=\"spyro-modules\/\" target=\"_blank\" rel=\"noopener\"><span class=\"tatsu-inline-link-style2\">CATEGORY &gt; SPYRO MODULES<\/span><\/a><\/p>\n<\/div><\/div><div  class=\"tatsu-module tatsu-inline-text clearfix tatsu-Bkwxxo6VF   \" ><style>.tatsu-Bkwxxo6VF .tatsu-inline-text-inner{width: 100%;text-align: left;}@media only screen and (max-width: 767px) {.tatsu-Bkwxxo6VF .tatsu-inline-text-inner{width: 100%;}}<\/style><div class=\"tatsu-inline-text-inner tatsu-align-center\">\n<h3>Spyro Accordion<\/h3>\n<\/div><\/div><div  class=\"tatsu-module tatsu-inline-text clearfix tatsu-HJ0yljaVt   \" ><style>.tatsu-HJ0yljaVt .tatsu-inline-text-inner{width: 100%;text-align: left;}@media only screen and (max-width: 767px) {.tatsu-HJ0yljaVt .tatsu-inline-text-inner{width: 100%;}}<\/style><div class=\"tatsu-inline-text-inner tatsu-align-center\">\n<p class=\"MsoNormal\"><span lang=\"EN-GB\" style=\"font-family: 'Segoe UI',sans-serif\">Using Spyro Accordion you can create an accordion to display the text in a collapsed or condensed manner, letting you save space while still presenting an abundance of content within your page. Using Spyro accordion the visitors can browse through the item titles, and choose to expand an item only if it is of their interest.<\/span><\/p>\n<p class=\"MsoNormal\"><span lang=\"EN-GB\" style=\"font-family: 'Segoe UI',sans-serif\">Spyro Accordion is a multilevel module consisting of multiple Accordion levels of the same type where each level is an Individual Sub Module, which will have the controls necessary for setting the service, while the parent module will have settings that affect the entire service or all individual service such as Color, Active Box Shadow, Typography, etc.<\/span><\/p>\n<p class=\"MsoNormal\"><span lang=\"EN-GB\" style=\"font-family: 'Segoe UI',sans-serif\">To add the Spyro Accordion Module to your page first, edit the page using Tatsu and add a section with a column\/row and then add the Spyro Accordion module in it.<\/span><\/p>\n<\/div><\/div><div  class=\"tatsu-module tatsu-inline-text clearfix tatsu-B1QVzspEK   \" ><style>.tatsu-B1QVzspEK .tatsu-inline-text-inner{width: 100%;text-align: left;}@media only screen and (max-width: 767px) {.tatsu-B1QVzspEK .tatsu-inline-text-inner{width: 100%;}}<\/style><div class=\"tatsu-inline-text-inner tatsu-align-center\">\n<h4>Accordion Toggles<\/h4>\n<\/div><\/div><div  class=\"tatsu-single-image tatsu-module tatsu-image-lazyload tatsu-BkVLfoTEY  \" ><div class=\"tatsu-single-image-inner \" style=\"width : 1398px;\" ><div class = \"tatsu-single-image-padding-wrap\" style = \"padding-bottom : 40.343347639485%;\" ><\/div><a class = \"mfp-image\" href = \"https:\/\/spyrowptheme.com\/documentation\/wp-content\/uploads\/sites\/24\/2021\/10\/Spyro-Accordion-Accordion-Toggles.png\" ><img class = \"tatsu-gradient-border\" alt = \"Spyro Accordion - Accordion Toggles\" title = \"Spyro Accordion &#8211; Accordion Toggles\" data-src = \"https:\/\/spyrowptheme.com\/documentation\/wp-content\/uploads\/sites\/24\/2021\/10\/Spyro-Accordion-Accordion-Toggles.png\" src =\"data:image\/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=\"  \/><\/a><\/div><style>.tatsu-BkVLfoTEY .tatsu-single-image-inner{border-style: solid;max-width: 100%;}.tatsu-BkVLfoTEY.tatsu-single-image{transform: translate3d(0px,0px, 0);}<\/style><\/div><div  class=\"tatsu-module tatsu-inline-text clearfix tatsu-SyucfopEF   \" ><style>.tatsu-SyucfopEF .tatsu-inline-text-inner{width: 100%;text-align: left;}@media only screen and (max-width: 767px) {.tatsu-SyucfopEF .tatsu-inline-text-inner{width: 100%;}}<\/style><div class=\"tatsu-inline-text-inner tatsu-align-center\">\n<p><span class=\"palette-3\"><span style=\"margin-top: 0pt;margin-bottom: 0pt\" data-preserver-spaces=\"true\">Spyro Accordion is best suited for creating a FAQ Section or displaying content that has a title and description list. It lets you set a&nbsp;<\/span><strong style=\"color: #0e101a;margin-top: 0pt;margin-bottom: 0pt\">Title<\/strong><span style=\"margin-top: 0pt;margin-bottom: 0pt\" data-preserver-spaces=\"true\">&nbsp;in clear Text and the Description&nbsp;<\/span><strong style=\"color: #0e101a;margin-top: 0pt;margin-bottom: 0pt\">Content&nbsp;<\/strong><span style=\"margin-top: 0pt;margin-bottom: 0pt\" data-preserver-spaces=\"true\">with plain text or any other media. You can add as many levels as you need by hitting the&nbsp;<\/span><strong style=\"color: #0e101a;margin-top: 0pt;margin-bottom: 0pt\">Add Toggle<\/strong><span style=\"margin-top: 0pt;margin-bottom: 0pt\" data-preserver-spaces=\"true\"> Button.<\/span><\/span><\/p>\n<\/div><\/div><div  class=\"tatsu-module tatsu-inline-text clearfix tatsu-BJT3Gip4Y   \" ><style>.tatsu-BJT3Gip4Y .tatsu-inline-text-inner{width: 100%;text-align: left;}@media only screen and (max-width: 767px) {.tatsu-BJT3Gip4Y .tatsu-inline-text-inner{width: 100%;}}<\/style><div class=\"tatsu-inline-text-inner tatsu-align-center\">\n<h4>Accordion Styling<\/h4>\n<\/div><\/div><div  class=\"tatsu-module tatsu-inline-text clearfix tatsu-SJgRGjT4Y   \" ><style>.tatsu-SJgRGjT4Y .tatsu-inline-text-inner{width: 100%;text-align: left;}@media only screen and (max-width: 767px) {.tatsu-SJgRGjT4Y .tatsu-inline-text-inner{width: 100%;}}<\/style><div class=\"tatsu-inline-text-inner tatsu-align-center\">\n<p class=\"MsoNormal\"><span lang=\"EN-GB\" style=\"font-family: 'Segoe UI',sans-serif\">You can style the accordion with <strong>Colors and Box Shadow<\/strong> by setting Normal Title Color, Active Title Color, Active Content Color, Active Border Color, Active Background Color and Active Box Color using Hex, RGBA, Color Swatches, or with a Color Palette. You can control the <strong>Typography<\/strong> of the Title and Description Content using TypeHub or using any custom font.<\/span><\/p>\n<\/div><\/div><div  class=\"tatsu-module tatsu-inline-text clearfix tatsu-BybkmsTEt   \" ><style>.tatsu-BybkmsTEt .tatsu-inline-text-inner{width: 100%;text-align: left;}@media only screen and (max-width: 767px) {.tatsu-BybkmsTEt .tatsu-inline-text-inner{width: 100%;}}<\/style><div class=\"tatsu-inline-text-inner tatsu-align-center\">\n<h4>Accordion Advanced Options<\/h4>\n<\/div><\/div><div  class=\"tatsu-module tatsu-inline-text clearfix tatsu-BkueQj6VF   \" ><style>.tatsu-BkueQj6VF .tatsu-inline-text-inner{width: 100%;text-align: left;}@media only screen and (max-width: 767px) {.tatsu-BkueQj6VF .tatsu-inline-text-inner{width: 100%;}}<\/style><div class=\"tatsu-inline-text-inner tatsu-align-center\">\n<p class=\"MsoNormal\"><span lang=\"EN-GB\" style=\"font-family: 'Segoe UI',sans-serif\">You can also modify the working and behavior of the Accordion service with advanced options like <strong>Spacing<\/strong>, <strong>Border<\/strong>, <strong>Box Shadow<\/strong>, <strong>Animation<\/strong>, <strong>CSS Identifiers<\/strong>, and its <strong>Visibility<\/strong>.<\/span><\/p>\n<\/div><\/div><\/div><\/div><div class = \"tatsu-column-bg-image-wrap\"><div class = \"tatsu-column-bg-image\" ><\/div><\/div><div class=\"tatsu-overlay tatsu-column-overlay tatsu-animate-none\" ><\/div><\/div><style>.tatsu-row > .tatsu-HJeenkspVK.tatsu-column{width: 75%;}.tatsu-HJeenkspVK.tatsu-column > .tatsu-column-inner > .tatsu-column-overlay{mix-blend-mode: normal;}.tatsu-HJeenkspVK > .tatsu-column-inner > .tatsu-top-divider{z-index: 9999;}.tatsu-HJeenkspVK > .tatsu-column-inner > .tatsu-bottom-divider{z-index: 9999;}.tatsu-HJeenkspVK > .tatsu-column-inner > .tatsu-left-divider{z-index: 9999;}.tatsu-HJeenkspVK > .tatsu-column-inner > .tatsu-right-divider{z-index: 9999;}@media only screen and (max-width:1377px) {.tatsu-row > .tatsu-HJeenkspVK.tatsu-column{width: 75%;}}@media only screen and (min-width:768px) and (max-width: 1024px) {.tatsu-row > .tatsu-HJeenkspVK.tatsu-column{width: 75%;}}@media only screen and (max-width: 767px) {.tatsu-row > .tatsu-HJeenkspVK.tatsu-column{width: 100%;}}<\/style><\/div><\/div><\/div><\/div><div class=\"tatsu-section-background-wrap\"><div class = \"tatsu-section-background\" ><\/div><\/div><div class=\"tatsu-overlay tatsu-section-overlay\"><\/div><style>.tatsu-Sy-6jyo64Y .tatsu-section-pad{padding: 90px 0px 90px 0px;}.tatsu-Sy-6jyo64Y .tatsu-section-offset-wrap{transform: translateY(-0px);}.tatsu-Sy-6jyo64Y > .tatsu-bottom-divider{z-index: 9999;}.tatsu-Sy-6jyo64Y > .tatsu-top-divider{z-index: 9999;}.tatsu-Sy-6jyo64Y .tatsu-section-overlay{mix-blend-mode: normal;}<\/style><\/div>\n","protected":false},"excerpt":{"rendered":"<div><a href=\"https:\/\/spyrowptheme.com\/documentation\/spyro-accordion\/\" class=\"exp-read-more exp-read-more-underlined\">Read More<\/a><\/div>\n","protected":false},"author":9,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-567","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/spyrowptheme.com\/documentation\/wp-json\/wp\/v2\/pages\/567","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/spyrowptheme.com\/documentation\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/spyrowptheme.com\/documentation\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/spyrowptheme.com\/documentation\/wp-json\/wp\/v2\/users\/9"}],"replies":[{"embeddable":true,"href":"https:\/\/spyrowptheme.com\/documentation\/wp-json\/wp\/v2\/comments?post=567"}],"version-history":[{"count":0,"href":"https:\/\/spyrowptheme.com\/documentation\/wp-json\/wp\/v2\/pages\/567\/revisions"}],"wp:attachment":[{"href":"https:\/\/spyrowptheme.com\/documentation\/wp-json\/wp\/v2\/media?parent=567"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}