{"id":6001,"date":"2020-11-26T10:03:29","date_gmt":"2020-11-26T10:03:29","guid":{"rendered":"https:\/\/colibriwp.com\/blog\/?p=6001"},"modified":"2022-05-17T13:44:50","modified_gmt":"2022-05-17T13:44:50","slug":"wordpress-accordions","status":"publish","type":"post","link":"https:\/\/colibriwp.com\/blog\/wordpress-accordions\/","title":{"rendered":"How to Create State of the Art WordPress Accordions"},"content":{"rendered":"<p><span style=\"font-weight: 400;\">User control and freedom: this is one of Jakob Nielsen&#8217;s 10 general principles for interaction design. <\/span><\/p>\n<p><span style=\"font-weight: 400;\">Website accordions allow users to achieve just that: choice and freedom.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Accordions are collapsible vertical menus that contain a list of headers that can be clicked to hide or unhide content associated with them.\u00a0 They give users the choice to read or ignore the content in front of them.<\/span><\/p>\n<p>&nbsp;<\/p>\n<h2><span style=\"font-weight: 400;\">How do website accordions work?<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">Let\u2019s look a bit at the anatomy of an accordion. WordPress accordions or any other website accordions contain (according to Smashing Magazine):<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">A category title<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">An expanded and a collapsed state<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">An icon indicating expansion<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">Once the category is expanded, the icon should change to indicate collapsing. Now, the designer should figure out what to do if a category\u2019s content is collapsed. Will it stay this way if another category gets collapsed as well?\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Let\u2019s look a bit at how Slack is using accordions. The icon will change direction when clicked, and all categories stay collapsed until they are clicked back into the initial non-collapsed state.<\/span><\/p>\n<p><img loading=\"lazy\" class=\"size-full wp-image-6003 aligncenter\" src=\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2020\/11\/Screen-Recording-2020-11-10-at-04.17.31.75-PM.gif\" alt=\"Slack is using accordions\" width=\"190\" height=\"374\" \/><\/p>\n<p>&nbsp;<\/p>\n<h3><span style=\"font-weight: 400;\">The main benefits of using WordPress accordions<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Now, let\u2019s see why accordions can be a great choice in web design.<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Accordions offer freedom, choice &amp; control for the end-user. This means that you\u2019ll provide a good user experience.<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">If you need to shorten a page, an accordion will be your user-friendly option.<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">If you want to save your user from neverending scrolling, you can display your content inside accordions.<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Accordions can be a better alternative to within-page links, which can be pretty nasty. Loading new pages might confuse the user and they might forget how they ended up there in the first place.\u00a0<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">This means that you can use accordions with tabbed text inside. When users click on the tab, its content will reveal to them.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">One thing you should know about is the fact that relevance beats long content. This means that if the content is really useful for the end-user, you can avoid accordions. You might end up annoying the website visitor if he will need to click lots of headers.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Also, if your pages are extremely long, if an accordion will make use of too many tabs, it will also ruin the overall experience. Try creating more pages (if enough content for them).<\/span><\/p>\n<p>&nbsp;<\/p>\n<h2><span style=\"font-weight: 400;\">Common use cases for WordPress accordions<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">Accordions are most commonly used in the design of FAQ pages (frequently asked questions) by displaying questions as tabs.\u00a0<\/span><\/p>\n<p><img loading=\"lazy\" class=\"aligncenter wp-image-6007\" src=\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2020\/11\/tesco-accordion-FAQ.jpg\" alt=\"tesco accordion FAQ\" width=\"650\" height=\"413\" \/><\/p>\n<p style=\"text-align: center;\"><em><span style=\"font-weight: 400;\">Source: tesco.com<\/span><\/em><\/p>\n<p><img loading=\"lazy\" class=\"aligncenter wp-image-6005\" src=\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2020\/11\/Heineken-product-FAQ-accordion.jpg\" alt=\"Heineken product FAQ accordion\" width=\"650\" height=\"408\" \/><\/p>\n<p style=\"text-align: center;\"><em><span style=\"font-weight: 400;\">Source: heineken.com<\/span><\/em><\/p>\n<p><span style=\"font-weight: 400;\">You can also present processes (eg: installing a SaaS product), upcoming events, jobs, features of a product, product reviews. There are multiple options out there. But always bear in mind this: relevance trumps accordions.\u00a0<\/span><\/p>\n<p>&nbsp;<\/p>\n<h2><span style=\"font-weight: 400;\">How to add WordPress accordions on your website<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">Now that we figured out where and how to use accordions, it\u2019s time to build one.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">Adding WordPress accordions using page builders<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">There are lots of free WordPress themes out there. The thing is that most of them do not include accordions in their free plans. You will most probably need a Pro theme. This is why we will be using the Colibri PRO theme and the Colibri builder for this exercise. In less than 3 minutes we\u2019ll have our accordion ready.<\/span><\/p>\n<ul>\n<li><span style=\"font-weight: 400;\">First, start by customizing your desired page from the WordPress dashboard.<img loading=\"lazy\" class=\"aligncenter wp-image-6004\" src=\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2020\/11\/customize-page.jpg\" alt=\"customize WordPress page\" width=\"600\" height=\"299\" \/><\/span><\/li>\n<li><span style=\"font-weight: 400;\">Next, from the left-hand side panel, select the \u201c+\u201d button. It will open up a window with blocks and components. From the components panel, select \u201cAccordion\u201d and drag it to your website on the right-hand side.<\/span><\/li>\n<\/ul>\n<p><img loading=\"lazy\" class=\"aligncenter wp-image-6008\" src=\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2020\/11\/WordPress-accordion-in-colibri.jpg\" alt=\"WordPress accordion in Colibri\" width=\"600\" height=\"433\" \/><\/p>\n<p><span style=\"font-weight: 400;\">If you want to delete the accordion, just select the whole section and hit \u201cdelete\u201d from the keyboard.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">The cool thing about this builder is that all the components will match the theme\u2019s styling.<\/span><\/p>\n<ul>\n<li><span style=\"font-weight: 400;\">Now, if you need to style more, you can do it from the left-hand side menu. You can adjust: s<\/span>ize and spacing, colors and typography, icons styling, borders, shadows, backgrounds, assign CSS classes, IDs and add custom CSS<\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">and more.<\/span><\/p>\n<p><img loading=\"lazy\" class=\"aligncenter wp-image-6006 size-full\" src=\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2020\/11\/Styling-WordPress-accordions-using-page-builders.jpg\" alt=\"Styling WordPress accordions using page builders\" width=\"373\" height=\"675\" \/><\/p>\n<p><span style=\"font-weight: 400;\">There\u2019s an option that allows multiple items to stay open, under the \u201cContent\u201d menu.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">There\u2019s so much flexibility that you won\u2019t be needing any other tool.<\/span><\/p>\n<p>&nbsp;<\/p>\n<p><span style=\"font-weight: 400;\">The accordion will be responsive by default, so you can get this worry off your chest.<\/span><\/p>\n<p>&nbsp;<\/p>\n<h3><span style=\"font-weight: 400;\">Adding WordPress accordions using plugins<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Now, if you\u2019re a plugins fan, here\u2019s how you can create a WordPress accordion:<\/span><\/p>\n<ol>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Choose your plugin (I\u2019m recommending bellow 3 popular WordPress accordion plugins)<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Install and activate your plugin: details in the tutorial below.<\/span><\/li>\n<\/ol>\n<div class='embed-container'><iframe loading=\"lazy\" title=\"How to Install, Deactivate and Work with WordPress Plugins\" width=\"1920\" height=\"1080\" src=\"https:\/\/www.youtube.com\/embed\/tRmW1Texk3k?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen><\/iframe><\/div>\n<p><span style=\"font-weight: 400;\">\u00a0 3. Set up your accordion<\/span><\/p>\n<p><span style=\"background-color: transparent;\">\u00a0 4. Publish your page<\/span><\/p>\n<p>&nbsp;<\/p>\n<p><span style=\"font-weight: 400;\">It\u2019s all that easy.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">The plugins that I recommend are:<\/span><\/p>\n<p>&nbsp;<\/p>\n<h4><a href=\"https:\/\/shapedplugin.com\/demo\/easy-accordion-pro\/\"><span style=\"font-weight: 400;\">Easy Accordion Pro<\/span><\/a><\/h4>\n<p><span style=\"font-weight: 400;\">Having more than 10k installs, this plugins comes jam-packed with features:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">It works by drag and drop<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">It is responsive<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Clean and intuitive admin panel<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">It is shortcode-ready<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Unlimited color options<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">It has activator events based on click or mouseover<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">and more.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Here\u2019s a short demo to see how intuitive it is:<\/span><\/p>\n<div class='embed-container'><iframe loading=\"lazy\" title=\"Easy Accordion Pro - Getting Started\" width=\"1920\" height=\"1080\" src=\"https:\/\/www.youtube.com\/embed\/Q5FMbMGz76Q?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen><\/iframe><\/div>\n<p><span style=\"font-weight: 400;\">After activating the plugin, look for the \u201cEasy Accordion\u201d menu on your WordPress admin panel. Select \u201cAdd New\u201d from the menu and you will find an Accordion Content input field and Shortcode Generator Settings panel. Now, it\u2019s up to you to customize everything. After setting up your accordion and hitting publish, you will receive a shortcode in the bottom section. Next, you just have to copy-paste the shortcode on your desired page.<\/span><\/p>\n<p>&nbsp;<\/p>\n<h4><a href=\"https:\/\/pickplugins.com\/item\/accordions-html-css3-responsive-accordion-grid-for-wordpress\"><span style=\"font-weight: 400;\">Accordion by PickPlugins<\/span><\/a><\/h4>\n<p><img loading=\"lazy\" class=\"size-full wp-image-6011 aligncenter\" src=\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2020\/11\/accordion-plugin.jpg\" alt=\"accordion plugin\" width=\"690\" height=\"337\" \/><\/p>\n<p><span style=\"font-weight: 400;\">This plugin is used by 30k+ active WordPress users. The accordions are displayed via shortcodes, an option that I really love whenever I encounter it.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">The plugin allows you to set up unlimited accordions and add them to your pages, FAQs, posts, or any other website area.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">The Pro plans allow for:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Vertical tabs<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Multilevel and nested WordPress accordions<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">The option to click the header to scroll top<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Header text toggling<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Updates and support\u00a0<\/span><\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<h4><a href=\"http:\/\/demo.wpshopmart.com\/accordion-pro\/\"><span style=\"font-weight: 400;\">Accordion FAQ<\/span><\/a><\/h4>\n<p><img loading=\"lazy\" class=\"aligncenter wp-image-6012\" src=\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2020\/11\/accordion-faq.jpg\" alt=\"accordion faq\" width=\"700\" height=\"376\" \/><\/p>\n<p><span style=\"font-weight: 400;\">Let\u2019s check a bit the most important features of the free plan:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Mobile-friendly<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Limitless accordions anywhere on the website<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Drag and Drop builder API integrated<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Shortcode-ready<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Font Awesome icon support<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Testimonial builder<\/span><\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<p><span style=\"font-weight: 400;\">If you need some more advanced features, here are some important paid features available in the PRO plan:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Responsive design<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">8 design templates<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">500+ Google Fonts<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">12 open\/close icons set<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">30+ content animation<\/span><\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<p><span style=\"font-weight: 400;\">Now, because these 3 plugins are using shortcodes to deploy accordions, there\u2019s another plugin I totally recommend, that will give you some extra features as well.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Meet: <\/span><a href=\"https:\/\/wordpress.org\/plugins\/shortcodes-ultimate\/\"><span style=\"font-weight: 400;\">Shortcodes Ultimate<\/span><\/a><\/p>\n<p><span style=\"font-weight: 400;\">This plugin is the mother of all shortcodes, really now!<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Just look at the examples below:<\/span><\/p>\n<p><img loading=\"lazy\" class=\"alignnone size-full wp-image-6013\" src=\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2020\/11\/Accordion-shortcode.jpg\" alt=\"Accordion shortcode\" width=\"758\" height=\"505\" \/><\/p>\n<p><span style=\"font-weight: 400;\">So, it will spare you from lots of headaches. I\u2019m definitely in for this plugin!<\/span><\/p>\n<h2><\/h2>\n<h2><span style=\"font-weight: 400;\">Conclusions<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">Accordions can be an option for avoiding neverending page scrolls. BUT, if the content is relevant to your website visitors, it\u2019s better to show all the content at once. People skim a lot, and clicking tabs doesn\u2019t help with that.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">The folks at Nielsen did an eye-tracking study that showed that people do scroll till the end of a page if the content provides them with real value and is properly formatted for scanning.\u00a0\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">You need to balance things out. If you\u2019re not sure if an accordion is a right choice, you can always AB test, if enough sample size.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">As per the technical side of WordPress accordions, there\u2019s nothing fancy to worry about. You can always choose a theme that has the accordion feature, or go with a page builder or a plugin.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Now, if you liked this article, and you want to learn more about how to <\/span><a href=\"https:\/\/colibriwp.com\/blog\/web-design-trends\/\"><span style=\"font-weight: 400;\">design a WordPress website<\/span><\/a><span style=\"font-weight: 400;\">, make sure to subscribe to our <\/span><a href=\"https:\/\/www.youtube.com\/channel\/UCN3ZM-C7TJgklVfseVHamHQ\"><span style=\"font-weight: 400;\">Youtube channel<\/span><\/a><span style=\"font-weight: 400;\"> and follow us on<\/span><a href=\"https:\/\/twitter.com\/WpColibri\"><span style=\"font-weight: 400;\"> Twitter<\/span><\/a><span style=\"font-weight: 400;\"> and <\/span><a href=\"https:\/\/www.facebook.com\/ColibriWP\"><span style=\"font-weight: 400;\">Facebook!<\/span><\/a><\/p>\n<p>&nbsp;<\/p>\n<p><span style=\"font-weight: 400;\">[sibwp_form id=1]<\/span><\/p>\n","protected":false},"excerpt":{"rendered":"<p>User control and freedom: this is one of Jakob Nielsen&#8217;s 10 general principles for interaction design. Website accordions allow users to achieve just that: choice and freedom.\u00a0 Accordions are collapsible vertical menus that contain a list of headers that can be clicked to hide or unhide content associated with them.\u00a0 They give users the choice&hellip; <br \/> <a class=\"read-more\" href=\"https:\/\/colibriwp.com\/blog\/wordpress-accordions\/\">Read more<\/a><\/p>\n","protected":false},"author":6,"featured_media":6002,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[159],"tags":[205],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v17.8 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>How to Create State of the Art WordPress Accordions - ColibriWP<\/title>\n<meta name=\"description\" content=\"All you need to know about creating WordPress accordions. How do they work? Which are their benefits and the most common accordions out there? Read on.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/colibriwp.com\/blog\/wordpress-accordions\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Create State of the Art WordPress Accordions - ColibriWP\" \/>\n<meta property=\"og:description\" content=\"All you need to know about creating WordPress accordions. How do they work? Which are their benefits and the most common accordions out there? Read on.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/colibriwp.com\/blog\/wordpress-accordions\/\" \/>\n<meta property=\"og:site_name\" content=\"ColibriWP Blog\" \/>\n<meta property=\"article:published_time\" content=\"2020-11-26T10:03:29+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-05-17T13:44:50+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2020\/11\/nihal-demirci-KRVvcaJhYSE-unsplash.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"850\" \/>\n\t<meta property=\"og:image:height\" content=\"567\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Alina Belascu\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"8 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebSite\",\"@id\":\"https:\/\/colibriwp.com\/blog\/#website\",\"url\":\"https:\/\/colibriwp.com\/blog\/\",\"name\":\"ColibriWP Blog\",\"description\":\"WordPress know-how to boost your design skills\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/colibriwp.com\/blog\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/colibriwp.com\/blog\/wordpress-accordions\/#primaryimage\",\"inLanguage\":\"en-US\",\"url\":\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2020\/11\/nihal-demirci-KRVvcaJhYSE-unsplash.jpg\",\"contentUrl\":\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2020\/11\/nihal-demirci-KRVvcaJhYSE-unsplash.jpg\",\"width\":850,\"height\":567,\"caption\":\"WordPress accordions\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/colibriwp.com\/blog\/wordpress-accordions\/#webpage\",\"url\":\"https:\/\/colibriwp.com\/blog\/wordpress-accordions\/\",\"name\":\"How to Create State of the Art WordPress Accordions - ColibriWP\",\"isPartOf\":{\"@id\":\"https:\/\/colibriwp.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/colibriwp.com\/blog\/wordpress-accordions\/#primaryimage\"},\"datePublished\":\"2020-11-26T10:03:29+00:00\",\"dateModified\":\"2022-05-17T13:44:50+00:00\",\"author\":{\"@id\":\"https:\/\/colibriwp.com\/blog\/#\/schema\/person\/87f760a68fccd9a3b83d34521adae311\"},\"description\":\"All you need to know about creating WordPress accordions. How do they work? Which are their benefits and the most common accordions out there? Read on.\",\"breadcrumb\":{\"@id\":\"https:\/\/colibriwp.com\/blog\/wordpress-accordions\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/colibriwp.com\/blog\/wordpress-accordions\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/colibriwp.com\/blog\/wordpress-accordions\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/colibriwp.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to Create State of the Art WordPress Accordions\"}]},{\"@type\":\"Person\",\"@id\":\"https:\/\/colibriwp.com\/blog\/#\/schema\/person\/87f760a68fccd9a3b83d34521adae311\",\"name\":\"Alina Belascu\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/colibriwp.com\/blog\/#personlogo\",\"inLanguage\":\"en-US\",\"url\":\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2020\/09\/119058219_10158647533825351_1768509508910138441_o.jpg\",\"contentUrl\":\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2020\/09\/119058219_10158647533825351_1768509508910138441_o.jpg\",\"caption\":\"Alina Belascu\"},\"description\":\"Alina is a digital marketer with a passion for web design. When she's not strategizing she's doing photography, listening to podcasts on history and psychology, and playing with her 2 dogs and cat.\",\"url\":\"https:\/\/colibriwp.com\/blog\/author\/alina-belascu\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Create State of the Art WordPress Accordions - ColibriWP","description":"All you need to know about creating WordPress accordions. How do they work? Which are their benefits and the most common accordions out there? Read on.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/colibriwp.com\/blog\/wordpress-accordions\/","og_locale":"en_US","og_type":"article","og_title":"How to Create State of the Art WordPress Accordions - ColibriWP","og_description":"All you need to know about creating WordPress accordions. How do they work? Which are their benefits and the most common accordions out there? Read on.","og_url":"https:\/\/colibriwp.com\/blog\/wordpress-accordions\/","og_site_name":"ColibriWP Blog","article_published_time":"2020-11-26T10:03:29+00:00","article_modified_time":"2022-05-17T13:44:50+00:00","og_image":[{"width":850,"height":567,"url":"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2020\/11\/nihal-demirci-KRVvcaJhYSE-unsplash.jpg","type":"image\/jpeg"}],"twitter_card":"summary_large_image","twitter_misc":{"Written by":"Alina Belascu","Est. reading time":"8 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebSite","@id":"https:\/\/colibriwp.com\/blog\/#website","url":"https:\/\/colibriwp.com\/blog\/","name":"ColibriWP Blog","description":"WordPress know-how to boost your design skills","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/colibriwp.com\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"ImageObject","@id":"https:\/\/colibriwp.com\/blog\/wordpress-accordions\/#primaryimage","inLanguage":"en-US","url":"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2020\/11\/nihal-demirci-KRVvcaJhYSE-unsplash.jpg","contentUrl":"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2020\/11\/nihal-demirci-KRVvcaJhYSE-unsplash.jpg","width":850,"height":567,"caption":"WordPress accordions"},{"@type":"WebPage","@id":"https:\/\/colibriwp.com\/blog\/wordpress-accordions\/#webpage","url":"https:\/\/colibriwp.com\/blog\/wordpress-accordions\/","name":"How to Create State of the Art WordPress Accordions - ColibriWP","isPartOf":{"@id":"https:\/\/colibriwp.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/colibriwp.com\/blog\/wordpress-accordions\/#primaryimage"},"datePublished":"2020-11-26T10:03:29+00:00","dateModified":"2022-05-17T13:44:50+00:00","author":{"@id":"https:\/\/colibriwp.com\/blog\/#\/schema\/person\/87f760a68fccd9a3b83d34521adae311"},"description":"All you need to know about creating WordPress accordions. How do they work? Which are their benefits and the most common accordions out there? Read on.","breadcrumb":{"@id":"https:\/\/colibriwp.com\/blog\/wordpress-accordions\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/colibriwp.com\/blog\/wordpress-accordions\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/colibriwp.com\/blog\/wordpress-accordions\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/colibriwp.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How to Create State of the Art WordPress Accordions"}]},{"@type":"Person","@id":"https:\/\/colibriwp.com\/blog\/#\/schema\/person\/87f760a68fccd9a3b83d34521adae311","name":"Alina Belascu","image":{"@type":"ImageObject","@id":"https:\/\/colibriwp.com\/blog\/#personlogo","inLanguage":"en-US","url":"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2020\/09\/119058219_10158647533825351_1768509508910138441_o.jpg","contentUrl":"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2020\/09\/119058219_10158647533825351_1768509508910138441_o.jpg","caption":"Alina Belascu"},"description":"Alina is a digital marketer with a passion for web design. When she's not strategizing she's doing photography, listening to podcasts on history and psychology, and playing with her 2 dogs and cat.","url":"https:\/\/colibriwp.com\/blog\/author\/alina-belascu\/"}]}},"_links":{"self":[{"href":"https:\/\/colibriwp.com\/blog\/wp-json\/wp\/v2\/posts\/6001"}],"collection":[{"href":"https:\/\/colibriwp.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/colibriwp.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/colibriwp.com\/blog\/wp-json\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/colibriwp.com\/blog\/wp-json\/wp\/v2\/comments?post=6001"}],"version-history":[{"count":3,"href":"https:\/\/colibriwp.com\/blog\/wp-json\/wp\/v2\/posts\/6001\/revisions"}],"predecessor-version":[{"id":10516,"href":"https:\/\/colibriwp.com\/blog\/wp-json\/wp\/v2\/posts\/6001\/revisions\/10516"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/colibriwp.com\/blog\/wp-json\/wp\/v2\/media\/6002"}],"wp:attachment":[{"href":"https:\/\/colibriwp.com\/blog\/wp-json\/wp\/v2\/media?parent=6001"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/colibriwp.com\/blog\/wp-json\/wp\/v2\/categories?post=6001"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/colibriwp.com\/blog\/wp-json\/wp\/v2\/tags?post=6001"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}