{"id":1152,"date":"2014-09-13T20:52:50","date_gmt":"2014-09-13T20:52:50","guid":{"rendered":"http:\/\/bravewhale.com\/?p=1120"},"modified":"2018-02-01T22:58:55","modified_gmt":"2018-02-02T06:58:55","slug":"the-best-wordpress-accordion-shortcode-plugin","status":"publish","type":"post","link":"https:\/\/bravewhale.com\/the-best-wordpress-accordion-shortcode-plugin\/","title":{"rendered":"The best WordPress accordion shortcode plugin"},"content":{"rendered":"<p><span style=\"color: #3366ff;\">*UPDATE &#8211; This post is pretty old, and while that plugin still exists, I never use it. I built all my WordPress sites with a theme called Total. It&#8217;s amazing and has an accordion module built in. If you need a new website and want to add accordions, try Total.<\/span><\/p>\n<p><a href=\"https:\/\/themeforest.net\/item\/total-responsive-multipurpose-wordpress-theme\/6339019?ref=bravewhale\" target=\"_blank\" rel=\"noopener\">Find it here on ThemeForest<\/a>.<\/p>\n<div class=\"vcex-module vcex-divider vcex-divider-solid vcex-divider-center wpex-mx-auto wpex-max-w-100 wpex-block wpex-h-0 wpex-border-b wpex-border-solid wpex-border-main\" style=\"width:100%;margin-top:20px;margin-bottom:20px;border-bottom-width:1px;border-color:#dddddd;\"><\/div>\n<p>Accordions are extremely useful for organizing and displaying large amounts of content without cluttering the page, and make it easy for the user to find what they&#8217;re looking for.\u00a0 You&#8217;ve most likely seen an accordion in use on a website several times before.\u00a0 They look something like this:<\/p>\n<p><img decoding=\"async\" class=\"aligncenter size-full wp-image-1121\" src=\"http:\/\/bravewhale.com\/wp-content\/uploads\/accordion-example.png\" alt=\"\" \/><\/p>\n<h3>Accordions in WordPress<\/h3>\n<p>I find it simplest to use an accordion shortcode plugin.\u00a0 This will add a new icon to your editor toolbar which you can use to insert the shortcode.<\/p>\n<h3>The best accordion plugin<\/h3>\n<p>Of all the available choices, there&#8217;s one plugin I find to be the best.\u00a0 It&#8217;s concisely named <a href=\"https:\/\/wordpress.org\/plugins\/accordion-shortcodes\/\" target=\"_blank\" rel=\"noopener\">Accordion Shortcodes<\/a>. What makes it the best?\u00a0 In fact it&#8217;s only one little feature I think makes this better than most accordion scripts or plugins.\u00a0 It&#8217;s an option that tells a newly opened section to scroll to the top of the screen.\u00a0 Without it an accordion section with lots of text will open up and get pushed outside the screen&#8217;s viewport.\u00a0 This especially makes it downright unusable to open accordions on a phone or mobile device.\u00a0 Imagine always needing to swipe back up to the top of the text you just opened.<\/p>\n<p><img decoding=\"async\" class=\"aligncenter size-full wp-image-1123\" src=\"http:\/\/bravewhale.com\/wp-content\/uploads\/accordion-shortcodes-autoscroll.gif\" alt=\"\" \/><\/p>\n<p>Above is a demo of the Accordion Shortcodes plugin that I&#8217;ve installed and styled on a client&#8217;s website.\u00a0 You can see when I click a section it opens and scrolls to the top for easy access; never pushing content out of view.<\/p>\n<p>Out of the box this plugin isn&#8217;t styled, but you can add some css that the author provides on the plugin repository page.\u00a0 I went ahead and added my own styles to make it look how you see it above.<\/p>\n<p><strong>Have you tried this accordion plugin? \u00a0Do you have a favorite?<\/strong><\/p>\n","protected":false},"excerpt":{"rendered":"<p>*UPDATE &#8211; This post is pretty old, and while that plugin still exists, I never use it. I built all my WordPress sites with a theme called Total. It&#8217;s amazing and has an accordion module built in. If you need a new website and want to add accordions, try Total. Find it here on ThemeForest.&hellip;<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[50],"tags":[],"post_series":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v22.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>The best WordPress accordion shortcode plugin - Brave Whale<\/title>\n<meta name=\"description\" content=\"A WordPress accordion shortcode plugin that makes it super easy for users to access content on mobile devices and up.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/bravewhale.com\/the-best-wordpress-accordion-shortcode-plugin\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"The best WordPress accordion shortcode plugin - Brave Whale\" \/>\n<meta property=\"og:description\" content=\"A WordPress accordion shortcode plugin that makes it super easy for users to access content on mobile devices and up.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/bravewhale.com\/the-best-wordpress-accordion-shortcode-plugin\/\" \/>\n<meta property=\"og:site_name\" content=\"Brave Whale\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/BraveWhale\/\" \/>\n<meta property=\"article:published_time\" content=\"2014-09-13T20:52:50+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2018-02-02T06:58:55+00:00\" \/>\n<meta property=\"og:image\" content=\"http:\/\/bravewhale.com\/wp-content\/uploads\/accordion-example.png\" \/>\n<meta name=\"author\" content=\"Mark C.\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Mark C.\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/bravewhale.com\/the-best-wordpress-accordion-shortcode-plugin\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/bravewhale.com\/the-best-wordpress-accordion-shortcode-plugin\/\"},\"author\":{\"name\":\"Mark C.\",\"@id\":\"https:\/\/bravewhale.com\/#\/schema\/person\/4e7334755817f8f751a774e1824f85f9\"},\"headline\":\"The best WordPress accordion shortcode plugin\",\"datePublished\":\"2014-09-13T20:52:50+00:00\",\"dateModified\":\"2018-02-02T06:58:55+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/bravewhale.com\/the-best-wordpress-accordion-shortcode-plugin\/\"},\"wordCount\":357,\"commentCount\":8,\"publisher\":{\"@id\":\"https:\/\/bravewhale.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/bravewhale.com\/the-best-wordpress-accordion-shortcode-plugin\/#primaryimage\"},\"thumbnailUrl\":\"http:\/\/bravewhale.com\/wp-content\/uploads\/accordion-example.png\",\"articleSection\":[\"WordPress\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/bravewhale.com\/the-best-wordpress-accordion-shortcode-plugin\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/bravewhale.com\/the-best-wordpress-accordion-shortcode-plugin\/\",\"url\":\"https:\/\/bravewhale.com\/the-best-wordpress-accordion-shortcode-plugin\/\",\"name\":\"The best WordPress accordion shortcode plugin - Brave Whale\",\"isPartOf\":{\"@id\":\"https:\/\/bravewhale.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/bravewhale.com\/the-best-wordpress-accordion-shortcode-plugin\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/bravewhale.com\/the-best-wordpress-accordion-shortcode-plugin\/#primaryimage\"},\"thumbnailUrl\":\"http:\/\/bravewhale.com\/wp-content\/uploads\/accordion-example.png\",\"datePublished\":\"2014-09-13T20:52:50+00:00\",\"dateModified\":\"2018-02-02T06:58:55+00:00\",\"description\":\"A WordPress accordion shortcode plugin that makes it super easy for users to access content on mobile devices and up.\",\"breadcrumb\":{\"@id\":\"https:\/\/bravewhale.com\/the-best-wordpress-accordion-shortcode-plugin\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/bravewhale.com\/the-best-wordpress-accordion-shortcode-plugin\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/bravewhale.com\/the-best-wordpress-accordion-shortcode-plugin\/#primaryimage\",\"url\":\"\",\"contentUrl\":\"\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/bravewhale.com\/the-best-wordpress-accordion-shortcode-plugin\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/bravewhale.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"The best WordPress accordion shortcode plugin\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/bravewhale.com\/#website\",\"url\":\"https:\/\/bravewhale.com\/\",\"name\":\"Brave Whale\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/bravewhale.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/bravewhale.com\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/bravewhale.com\/#organization\",\"name\":\"Brave Whale\",\"url\":\"https:\/\/bravewhale.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/bravewhale.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/bravewhale.com\/wp-content\/uploads\/2015\/09\/bw-logo-2015.png\",\"contentUrl\":\"https:\/\/bravewhale.com\/wp-content\/uploads\/2015\/09\/bw-logo-2015.png\",\"width\":295,\"height\":43,\"caption\":\"Brave Whale\"},\"image\":{\"@id\":\"https:\/\/bravewhale.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/BraveWhale\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/bravewhale.com\/#\/schema\/person\/4e7334755817f8f751a774e1824f85f9\",\"name\":\"Mark C.\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/bravewhale.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/3cd57d9a32149cdc9ed0fbb3c263cdff?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/3cd57d9a32149cdc9ed0fbb3c263cdff?s=96&d=mm&r=g\",\"caption\":\"Mark C.\"},\"url\":\"https:\/\/bravewhale.com\/author\/bwhale\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"The best WordPress accordion shortcode plugin - Brave Whale","description":"A WordPress accordion shortcode plugin that makes it super easy for users to access content on mobile devices and up.","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:\/\/bravewhale.com\/the-best-wordpress-accordion-shortcode-plugin\/","og_locale":"en_US","og_type":"article","og_title":"The best WordPress accordion shortcode plugin - Brave Whale","og_description":"A WordPress accordion shortcode plugin that makes it super easy for users to access content on mobile devices and up.","og_url":"https:\/\/bravewhale.com\/the-best-wordpress-accordion-shortcode-plugin\/","og_site_name":"Brave Whale","article_publisher":"https:\/\/www.facebook.com\/BraveWhale\/","article_published_time":"2014-09-13T20:52:50+00:00","article_modified_time":"2018-02-02T06:58:55+00:00","og_image":[{"url":"http:\/\/bravewhale.com\/wp-content\/uploads\/accordion-example.png"}],"author":"Mark C.","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Mark C.","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/bravewhale.com\/the-best-wordpress-accordion-shortcode-plugin\/#article","isPartOf":{"@id":"https:\/\/bravewhale.com\/the-best-wordpress-accordion-shortcode-plugin\/"},"author":{"name":"Mark C.","@id":"https:\/\/bravewhale.com\/#\/schema\/person\/4e7334755817f8f751a774e1824f85f9"},"headline":"The best WordPress accordion shortcode plugin","datePublished":"2014-09-13T20:52:50+00:00","dateModified":"2018-02-02T06:58:55+00:00","mainEntityOfPage":{"@id":"https:\/\/bravewhale.com\/the-best-wordpress-accordion-shortcode-plugin\/"},"wordCount":357,"commentCount":8,"publisher":{"@id":"https:\/\/bravewhale.com\/#organization"},"image":{"@id":"https:\/\/bravewhale.com\/the-best-wordpress-accordion-shortcode-plugin\/#primaryimage"},"thumbnailUrl":"http:\/\/bravewhale.com\/wp-content\/uploads\/accordion-example.png","articleSection":["WordPress"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/bravewhale.com\/the-best-wordpress-accordion-shortcode-plugin\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/bravewhale.com\/the-best-wordpress-accordion-shortcode-plugin\/","url":"https:\/\/bravewhale.com\/the-best-wordpress-accordion-shortcode-plugin\/","name":"The best WordPress accordion shortcode plugin - Brave Whale","isPartOf":{"@id":"https:\/\/bravewhale.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/bravewhale.com\/the-best-wordpress-accordion-shortcode-plugin\/#primaryimage"},"image":{"@id":"https:\/\/bravewhale.com\/the-best-wordpress-accordion-shortcode-plugin\/#primaryimage"},"thumbnailUrl":"http:\/\/bravewhale.com\/wp-content\/uploads\/accordion-example.png","datePublished":"2014-09-13T20:52:50+00:00","dateModified":"2018-02-02T06:58:55+00:00","description":"A WordPress accordion shortcode plugin that makes it super easy for users to access content on mobile devices and up.","breadcrumb":{"@id":"https:\/\/bravewhale.com\/the-best-wordpress-accordion-shortcode-plugin\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/bravewhale.com\/the-best-wordpress-accordion-shortcode-plugin\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/bravewhale.com\/the-best-wordpress-accordion-shortcode-plugin\/#primaryimage","url":"","contentUrl":""},{"@type":"BreadcrumbList","@id":"https:\/\/bravewhale.com\/the-best-wordpress-accordion-shortcode-plugin\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/bravewhale.com\/"},{"@type":"ListItem","position":2,"name":"The best WordPress accordion shortcode plugin"}]},{"@type":"WebSite","@id":"https:\/\/bravewhale.com\/#website","url":"https:\/\/bravewhale.com\/","name":"Brave Whale","description":"","publisher":{"@id":"https:\/\/bravewhale.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/bravewhale.com\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/bravewhale.com\/#organization","name":"Brave Whale","url":"https:\/\/bravewhale.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/bravewhale.com\/#\/schema\/logo\/image\/","url":"https:\/\/bravewhale.com\/wp-content\/uploads\/2015\/09\/bw-logo-2015.png","contentUrl":"https:\/\/bravewhale.com\/wp-content\/uploads\/2015\/09\/bw-logo-2015.png","width":295,"height":43,"caption":"Brave Whale"},"image":{"@id":"https:\/\/bravewhale.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/BraveWhale\/"]},{"@type":"Person","@id":"https:\/\/bravewhale.com\/#\/schema\/person\/4e7334755817f8f751a774e1824f85f9","name":"Mark C.","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/bravewhale.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/3cd57d9a32149cdc9ed0fbb3c263cdff?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/3cd57d9a32149cdc9ed0fbb3c263cdff?s=96&d=mm&r=g","caption":"Mark C."},"url":"https:\/\/bravewhale.com\/author\/bwhale\/"}]}},"_links":{"self":[{"href":"https:\/\/bravewhale.com\/wp-json\/wp\/v2\/posts\/1152"}],"collection":[{"href":"https:\/\/bravewhale.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/bravewhale.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/bravewhale.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/bravewhale.com\/wp-json\/wp\/v2\/comments?post=1152"}],"version-history":[{"count":0,"href":"https:\/\/bravewhale.com\/wp-json\/wp\/v2\/posts\/1152\/revisions"}],"wp:attachment":[{"href":"https:\/\/bravewhale.com\/wp-json\/wp\/v2\/media?parent=1152"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/bravewhale.com\/wp-json\/wp\/v2\/categories?post=1152"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/bravewhale.com\/wp-json\/wp\/v2\/tags?post=1152"},{"taxonomy":"post_series","embeddable":true,"href":"https:\/\/bravewhale.com\/wp-json\/wp\/v2\/post_series?post=1152"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}