{"id":102472,"date":"2023-01-18T16:58:10","date_gmt":"2023-01-18T11:28:10","guid":{"rendered":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/?post_type=documents&#038;p=102472"},"modified":"2023-07-18T10:54:41","modified_gmt":"2023-07-18T05:24:41","slug":"elementor-accordion-widget-settings-overview","status":"publish","type":"documents","link":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/docs\/elementor-accordion-widget-settings-overview\/","title":{"rendered":"Elementor Accordion Widget Settings Overview"},"content":{"rendered":"\n<p>The accordion widget is a helpful little widget that can be used to create an FAQ page. By clicking on the left side of the accordion, it will open up with all the questions. When you click on the right side, it will close up and show you the answers.<\/p>\n\n\n\n<p>It&#8217;s a great way to create FAQs for your website or blog post and make it more interactive for your readers! The Plus Addons for Elementor Accordion widget comes with featured packed solutions to make the unique design.<\/p>\n\n\n\n<div class=\"wp-block-buttons is-content-justification-center is-layout-flex wp-container-core-buttons-is-layout-a89b3969 wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button has-custom-width wp-block-button__width-75 is-style-fill\"><a class=\"wp-block-button__link has-nxt-global-color-8-color has-nxt-global-color-1-background-color has-text-color has-background wp-element-button\" href=\"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/widgets\/accordion?utm_source=tpae&amp;utm_medium=docs&amp;utm_campaign=text\" style=\"border-radius:5px\" target=\"_blank\" rel=\"noreferrer noopener\">LIVE WIDGET LINK<\/a><\/div>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Required Setup<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/wordpress.org\/plugins\/elementor\/\" target=\"_blank\" rel=\"noreferrer noopener\">Elementor FREE Plugin<\/a> installed &amp; activated.<\/li>\n\n\n\n<li>You need to have <a href=\"https:\/\/wordpress.org\/plugins\/the-plus-addons-for-elementor-page-builder\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">The Plus Addons for Elementor plugin<\/a> installed and activated.<\/li>\n\n\n\n<li>Make sure the Accordion widget is activated, to verify this visit Plus Settings \u2192 and Search of Accordion and activate.&nbsp;<\/li>\n\n\n\n<li>This is a Freemium widget to unlock the extra features, you need the <a href=\"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/pricing\/?utm_source=tpae&amp;utm_medium=docs&amp;utm_campaign=text\" target=\"_blank\" rel=\"noreferrer noopener\">PRO version of The Plus Addons for Elementor<\/a>.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Learn via Video Tutorial <\/h2>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe title=\"How to create amazing accordions using Widget for The Plus Addons for Elementor?\" width=\"1200\" height=\"675\" src=\"https:\/\/www.youtube.com\/embed\/9wy4Pgs_WcU?start=211&#038;feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">How to Activate the Accordion Widget?<\/h2>\n\n\n\n<p>Go to&nbsp;<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>The Plus Settings <\/strong>\u2192<strong> Plus widgets&nbsp;<\/strong><\/li>\n\n\n\n<li><strong>Search <\/strong>the widget nameand<strong> turn on the toggle <\/strong>then<strong> click Save.<\/strong><\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img fetchpriority=\"high\" decoding=\"async\" width=\"1024\" height=\"285\" src=\"https:\/\/etemplates.wdesignkit.com\/wp-content\/uploads\/sites\/55\/2023\/01\/activate-accordion-widget-1024x285.png\" alt=\"activate accordion widget\" class=\"wp-image-102999\" srcset=\"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/01\/activate-accordion-widget-1024x285.png 1024w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/01\/activate-accordion-widget-300x84.png 300w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/01\/activate-accordion-widget-768x214.png 768w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/01\/activate-accordion-widget-1536x428.png 1536w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/01\/activate-accordion-widget-600x167.png 600w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/01\/activate-accordion-widget.png 1916w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Key Features<\/h2>\n\n\n\n<p><strong>Multiple content sources<\/strong> &#8211; You can choose from <strong>Content <\/strong>(Free) or <strong>Page template <\/strong>(Pro). When you use the content option as the content source type, you can use any shortcode to display the content in the accordion.<\/p>\n\n\n\n<p><strong>Easily add standard icons to the accordion<\/strong> (Free) &#8211;&nbsp; You can easily add the standard expand and collapse icons for all accordion items.<\/p>\n\n\n\n<p><strong>Different HTML tag options for accordion heading<\/strong> (Free) &#8211; Different HTML tags like H1, H2 etc. can be used for the accordion heading this will improve your SEO.<\/p>\n\n\n\n<p><strong>Individual icons for each accordion <\/strong>(Pro) &#8211;&nbsp; You can use different icons for each accordion item.To use it, turn on the Show icon toggle inside the accordion item and set the icon.<\/p>\n\n\n\n<p><strong>Unique ID <\/strong>(Pro) &#8211; You can add a unique id for each accordion item to easily create anchor links directly to the accordion item.<\/p>\n\n\n\n<p><strong>Active Accordion <\/strong>(Pro) &#8211; Here you can easily set a custom active accordion item or set all to close by default.<\/p>\n\n\n\n<p><strong>On Hover Accordion <\/strong>(Pro) &#8211; You can make the accordion open when someone hovers over the accordion title.<\/p>\n\n\n\n<p><strong>Horizontal Accordion<\/strong> (Pro)- You can easily turn your vertical accordion into a horizontal accordion.<\/p>\n\n\n\n<p><strong>Expand\/Collapse Content Button<\/strong> (Pro)- Set a button to expand and collapse all accordions at once.<\/p>\n\n\n\n<p><strong>Scroll Top<\/strong> (Pro)- This option will scroll the active accordion to the top of the screen making it easy for readers to read.<\/p>\n\n\n\n<p><strong>Stagger Animation<\/strong> (Pro) &#8211; With this option, you can display each accordion item one by one with a delay.<\/p>\n\n\n\n<p><strong>Search <\/strong>(Pro) &#8211; You can add a text search functionality within your accordion.<\/p>\n\n\n\n<p><strong>Slider\/Pagination<\/strong>(Pro) &#8211; You can easily split your long list of accordions in pagination.<\/p>\n\n\n\n<p><strong>Autoplay<\/strong> (Pro)- You can make your accordion play automatically from one item to another.<\/p>\n\n\n\n<p><strong>SEO Schema Markup<\/strong> (Pro)- Turn your accordion into SEO-friendly schema markup.<strong>Carousel Connection ID<\/strong> (Pro) &#8211; You can easily connect the Carousel Anything widget with your accordion with a unique ID. So when a user clicks on an accordion item the slider will also change.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">How to add content in Accordion Widget?<\/h2>\n\n\n\n<p>To add content to the accordion widget, click on the accordion item you want to add the content to. In the title field, you can add the heading for the accordion tab.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"296\" height=\"869\" src=\"https:\/\/etemplates.wdesignkit.com\/wp-content\/uploads\/sites\/55\/2023\/01\/accordion-title.png\" alt=\"accordion title\" class=\"wp-image-103001\" srcset=\"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/01\/accordion-title.png 296w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/01\/accordion-title-102x300.png 102w\" sizes=\"(max-width: 296px) 100vw, 296px\" \/><\/figure>\n\n\n\n<p>For the content source, there are two options <strong>Content<\/strong> (Free) i.e. plain text content and <strong>Elementor Page Template<\/strong> (Pro).<\/p>\n\n\n\n<p>If you choose the content option you can enter the text in the editor, or you can use it to render a shortcode content as well.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"664\" height=\"735\" src=\"https:\/\/etemplates.wdesignkit.com\/wp-content\/uploads\/sites\/55\/2023\/01\/accordion-content-source.png\" alt=\"accordion elementor template\" class=\"wp-image-102990\" srcset=\"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/01\/accordion-content-source.png 664w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/01\/accordion-content-source-271x300.png 271w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/01\/accordion-content-source-600x664.png 600w\" sizes=\"(max-width: 664px) 100vw, 664px\" \/><\/figure>\n\n\n\n<p>When you select the page template, you get the option to select the template from the dropdown. You only see content if a template has been created from beforehand.<\/p>\n\n\n\n<p>The template method, is truly limitless and gives you power to show any form of content like gallery, carousel, WooCommerce products, blog posts or anything you can imagine creating in Elementor.<\/p>\n\n\n\n<p>Here you will see a backend visibility option, which speeds up the editing experience by not loading the Elementor template content in backend. If you want to see how things look you can turn it on, and then make it off once done.&nbsp;<\/p>\n\n\n\n<p>Next you will see the show icon option, using this you can add an extra icon inside the accordion title element. This is a separate icon than your normal closing and opening icon. This can be unique for every title, where you get to choose your icons from multiple library and customize the colour accordingly.<\/p>\n\n\n\n<p>Lastly you will see a unique ID, which gives anchor ID to an individual accordion content. This is helpful when you want to directly link and show a specific accordion tab content. You can read more about this process from here.<br>You can add as many Accordion contents by clicking on the \u2018<strong>Add Item\u2019<\/strong> button.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">How to Change Accordion Icon?<\/h2>\n\n\n\n<p>In order to change the standard icons of all the accordion items go to the <strong>Icon Option<\/strong>, make sure the <strong>Show Icon<\/strong> toggle is on, from there you can set the open and close icons for the accordion items.&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Understanding Special Options<\/h2>\n\n\n\n<p>These special options make this Accordion widget truly powerful, we have covered a dedicated doc on each one of them so that you can understand them in depth.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/docs\/openclose-elementor-accordion-bydefault\/\" target=\"_blank\" rel=\"noreferrer noopener\">Active Accordion<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/docs\/elementor-accordion-on-hover\/\" target=\"_blank\" rel=\"noreferrer noopener\">On Hover Accordion<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/docs\/elementor-horizontal-accordion\/\" target=\"_blank\" rel=\"noreferrer noopener\">Horizontal Accordion<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/docs\/expand-close-elementor-accordion-button\/\" target=\"_blank\" rel=\"noreferrer noopener\">Expand\/Collapse Content Button<\/a><\/li>\n\n\n\n<li>Scroll Top<\/li>\n\n\n\n<li>Stagger Animation<\/li>\n\n\n\n<li><a href=\"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/docs\/elementor-accordion-search\/\" target=\"_blank\" rel=\"noreferrer noopener\">Search<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/docs\/elementor-accordion-pagination\/\" target=\"_blank\" rel=\"noreferrer noopener\">Slider\/Pagination<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/docs\/elementor-accordion-autoplay\/\" target=\"_blank\" rel=\"noreferrer noopener\">Autoplay<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/docs\/elementor-accordion-schema-markup\/\" target=\"_blank\" rel=\"noreferrer noopener\">SEO Scheme Markup<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/docs\/carousel-widgets-remotesync-elementor\/\" target=\"_blank\" rel=\"noreferrer noopener\">Carousel Connection ID<\/a><\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">How to Style your Accordion Content?<\/h2>\n\n\n\n<p>Under the style tab you will see some options to style your accordion.<\/p>\n\n\n\n<p><strong>Icon tab<\/strong> (Free) &#8211; From here you can control the styling of the standard accordion icons, like alignment, colour, size, and gap.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"299\" height=\"739\" src=\"https:\/\/etemplates.wdesignkit.com\/wp-content\/uploads\/sites\/55\/2023\/01\/accordion-icon-style.png\" alt=\"accordion icon style\" class=\"wp-image-103002\" srcset=\"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/01\/accordion-icon-style.png 299w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/01\/accordion-icon-style-121x300.png 121w\" sizes=\"(max-width: 299px) 100vw, 299px\" \/><\/figure>\n\n\n\n<p><strong>Title &#8211; <\/strong>From here you can style the title of the accordion. You can customize the title typography, and colour.<\/p>\n\n\n\n<p>You can also style the additional icon of the title from here, you can control the icon size, icon background, box shadow etc.&nbsp;<\/p>\n\n\n\n<p><strong>Title Background <\/strong>&#8211; From here you can control the overall title background styling of the accordion element. You can add inner padding to the title, and change the background colour.<\/p>\n\n\n\n<p>Use the <strong>Box Border<\/strong> option to add a border around the title, you can also control the border styling from here.<\/p>\n\n\n\n<p>You can manage the spacing between the accordion items from here too.<\/p>\n\n\n\n<p><strong>Content <\/strong>&#8211; From here you can control the typography of the content inside the accordion.<\/p>\n\n\n\n<p><strong>Content Background <\/strong>&#8211;<strong> <\/strong>From here you can change the background of the description area of the accordion. You can control the content area margin, padding and background colour.<\/p>\n\n\n\n<p>You can also add a border to the accordion content area using the <strong>Box Border<\/strong> option.<br><strong>Hover Style<\/strong> &#8211; You get 2 unique hover styles to the accordion title from this section, as you can see in the GIF below.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1600\" height=\"530\" src=\"https:\/\/etemplates.wdesignkit.com\/wp-content\/uploads\/sites\/55\/2023\/01\/accordion-hover-style.gif\" alt=\"accordion on hover style\" class=\"wp-image-102572\"\/><\/figure>\n\n\n\n<p><strong>On Scroll View Animation<\/strong> &#8211;&nbsp; This is our global extension available for all our widget, this adds scrolling animation as the widget comes in viewport.<\/p>\n\n\n\n<p><a href=\"https:\/\/docs.posimyth.com\/tpae\/on-scroll-view-animation\/\">Learn more about On Scroll View Animation<\/a><\/p>\n\n\n\n<p>Advanced options remain common for all our widget, you can explore all it options from here.<\/p>\n\n\n\n<p><a href=\"https:\/\/theplusblocks.com\/docs\/advanced-tab-settings-overview\/\" target=\"_blank\" rel=\"noreferrer noopener\">View Advanced tab tutorial.<\/a><\/p>\n\n\n\n<p>.<\/p>\n","protected":false},"author":21,"featured_media":102523,"parent":0,"comment_status":"closed","ping_status":"closed","template":"","format":"standard","docs":[529,527],"class_list":["post-102472","documents","type-documents","status-publish","format-standard","has-post-thumbnail","hentry","docs-accordion","docs-plus-widgets"],"acf":[],"_links":{"self":[{"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/documents\/102472","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/documents"}],"about":[{"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/types\/documents"}],"author":[{"embeddable":true,"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/users\/21"}],"replies":[{"embeddable":true,"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/comments?post=102472"}],"version-history":[{"count":0,"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/documents\/102472\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/media\/102523"}],"wp:attachment":[{"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/media?parent=102472"}],"wp:term":[{"taxonomy":"docs","embeddable":true,"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/docs?post=102472"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}