{"id":1916,"date":"2020-09-16T06:46:41","date_gmt":"2020-09-15T22:46:41","guid":{"rendered":"https:\/\/www.intelliwolf.com\/?p=1916"},"modified":"2020-09-16T06:46:43","modified_gmt":"2020-09-15T22:46:43","slug":"how-to-make-a-web-accessible-disclosure-toggle-using-shortcodes","status":"publish","type":"post","link":"https:\/\/www.intelliwolf.com\/how-to-make-a-web-accessible-disclosure-toggle-using-shortcodes\/","title":{"rendered":"How To Make A Web Accessible Disclosure Toggle Using Shortcodes"},"content":{"rendered":"\n

I spoke previously about how to make Divi's toggle module web accessible<\/a>, but what if you weren't using Divi?<\/p>\n\n\n\n

I needed to have a disclosure pattern toggle<\/a> independent of any theme. It needed to be setup using a shortcode with customizable content.<\/p>\n\n\n\n

Ideally, you'd want to wrap this into a plugin, but I'm going to build it inside of a child theme for this tutorial. See the tutorial on child themes<\/a> if you need a refresher.<\/p>\n\n\n\n

How to make a web accessible disclosure toggle<\/strong>: In functions.php<\/em> add a shortcode that set the customizable content into a span for the toggle and a div for the content. Add the jQuery to trigger the opening and closing functionality. Add CSS to style.css<\/em> to display the disclosure indicator and handle the visibility.<\/p>\n\n\n\n

The code that goes into functions.php<\/em> is:<\/p>\n\n\n\n

add_shortcode( 'mini_toggle', 'mini_toggle_func' );\n\nfunction mini_toggle_func( $atts, $content = \"\" ) {\n  $id = !empty( $atts['id'] ) ? $atts['id'] : 'mini-toggle';\n  $title = !empty( $atts['title'] ) ? $atts['title'] : 'View more';\n  $content_id = $id . '-content';\n  $html = \"\";\n  $html .= \"<span class='mini-toggle-trigger mini-toggle-closed' role='button' id='$id' aria-controls='$content_id' aria-expanded='false'>$title<\/span>\";\n  $html .= \"<div class='mini-toggle-content mini-toggle-closed' id='$content_id' aria-labelledby='$id'><p>$content<\/p><\/div>\";\n  $html .=\"<script>\n  jQuery(document).ready(function ($) {\n    var toggleClosed = 'mini-toggle-closed';\n    var toggleOpen = 'mini-toggle-open';\n    $('.mini-toggle-trigger').click(function() {\n      var relatedContent = $(this).attr('aria-controls');\n      if ($(this).hasClass(toggleClosed)) {\n        $(this).removeClass(toggleClosed);\n        $(this).addClass(toggleOpen);\n        $(this).attr('aria-expanded','true');\n        $('#' + relatedContent).removeClass(toggleClosed);\n        $('#' + relatedContent).addClass(toggleOpen);\n      } else {\n        $(this).removeClass(toggleOpen);\n        $(this).addClass(toggleClosed);\n        $(this).attr('aria-expanded','false');\n        $('#' + relatedContent).removeClass(toggleOpen);\n        $('#' + relatedContent).addClass(toggleClosed);\n      }\n    });\n  });\n  <\/script>\";\n  return $html;\n}<\/code><\/pre>\n\n\n\n
Then add this to style.css<\/em> or to Additional CSS<\/em> in the Theme Customizer:<\/p>\n\n\n\n
.mini-toggle-closed.mini-toggle-content {\n  display: none;\n}\n.mini-toggle-open.mini-toggle-content {\n  display: block;\n}\n.mini-toggle-closed.mini-toggle-trigger::before {\n  font-family: \"FontAwesome\";\n  content: \"\\f054\";\n}\n.mini-toggle-open.mini-toggle-trigger::before {\n  font-family: \"FontAwesome\";\n  content: \"\\f078\";\n}<\/code><\/pre>\n\n\n\n
For the disclosure indicators, I'm using Font Awesome with the free Font Awesome Plugin<\/a>. You can just install and activate that and be up and running.<\/p>\n\n\n\n
If you're using a different font set to display the disclosure indicators, or your theme already has Font Awesome, you might need to adjust the name of the font-family<\/em> or the content<\/em> to match.<\/p>\n\n\n\n
How to use the shortcode<\/h2>\n\n\n\n
To use this shortcode, add the following to your page, post or widget:<\/p>\n\n\n\n
[mini_toggle id=\"toggle1\" title=\"See more about us\"]This is the content about us.[\/mini_toggle]<\/code><\/pre>\n\n\n\n
The order of the id<\/em> and title<\/em> don't matter.<\/p>\n\n\n\n
If you only have one disclosure toggle on a page, you don't need to add the id<\/em>. But if you are going to have multiple disclosure toggles, you need to add a unique id to each one. You can use digits, just not as the first character of the id<\/em>.<\/p>\n\n\n\n
The title<\/em> will become the title of the button that triggers the visibility.<\/p>\n\n\n\n
The part between the square brackets is the content that will be hidden initially and become visible when someone clicks on it.<\/p>\n\n\n\n
The outputted code looks like this:<\/p>\n\n\n\n
<span class=\"mini-toggle-trigger mini-toggle-closed\" role=\"button\" id=\"toggle1\" aria-controls=\"toggle1-content\" aria-expanded=\"false\">See more about us<\/span>\n<div class=\"mini-toggle-content mini-toggle-closed\" id=\"toggle1-content\" aria-labelledby=\"toggle1\">\n  <p>This is the content about us.<\/p>\n<\/div><\/code><\/pre>\n\n\n\n
How to use the code for multiple toggles on a page<\/h2>\n\n\n\n
If you're going to use multiple toggles on a page, then you should pull in the jQuery separately. Otherwise it will be outputted as many times as you have shortcodes and may cause issues.<\/p>\n\n\n\n
Instead of the previous, add this code to functions.php<\/em>:<\/p>\n\n\n\n
add_shortcode( 'mini_toggle', 'mini_toggle_func' );\r\n\r\nfunction mini_toggle_func( $atts, $content = \"\" ) {\r\n  $id = !empty( $atts['id'] ) ? $atts['id'] : 'mini-toggle';\r\n  $title = !empty( $atts['title'] ) ? $atts['title'] : 'View more';\r\n  $content_id = $id . '-content';\r\n  $html = \"\";\r\n  $html .= \"<span class='mini-toggle-trigger mini-toggle-closed' role='button' id='$id' aria-controls='$content_id' aria-expanded='false'>$title<\/span>\";\r\n  $html .= \"<div class='mini-toggle-content mini-toggle-closed' id='$content_id' aria-labelledby='$id'><p>$content<\/p><\/div>\";\r\n  return $html;\r\n}<\/code><\/pre>\n\n\n\n
Then you'll need to add the jQuery separately.<\/p>\n\n\n\n
If you're going to be using the toggles on multiple pages, add the jQuery to an external file called from your functions.php<\/em> file. Otherwise it's fine to paste it into the page through your page builder or using something like SOGO Header Footer Scripts<\/a>.<\/p>\n\n\n\n
This is the jQuery you'll need:<\/p>\n\n\n\n
<script>\njQuery(document).ready(function ($) {\n  var toggleClosed = 'mini-toggle-closed';\n  var toggleOpen = 'mini-toggle-open';\n  $('.mini-toggle-trigger').click(function() {\n    var relatedContent = $(this).attr('aria-controls');\n    if ($(this).hasClass(toggleClosed)) {\n      $(this).removeClass(toggleClosed);\n      $(this).addClass(toggleOpen);\n      $(this).attr('aria-expanded','true');\n      $('#' + relatedContent).removeClass(toggleClosed);\n      $('#' + relatedContent).addClass(toggleOpen);\n    } else {\n      $(this).removeClass(toggleOpen);\n      $(this).addClass(toggleClosed);\n      $(this).attr('aria-expanded','false');\n      $('#' + relatedContent).removeClass(toggleOpen);\n      $('#' + relatedContent).addClass(toggleClosed);\n    }\n  });\n});\n<\/script><\/code><\/pre>\n\n\n\n
Because this code pulls in the ID of the clicked toggle (the var relatedContent<\/em> line), it can be used with multiple toggles on the same page.<\/p>\n","protected":false},"excerpt":{"rendered":"
I spoke previously about how to make Divi’s toggle module web accessible, but what if you weren’t using Divi? I needed to have a disclosure pattern toggle independent of any theme. It needed to be setup using a shortcode with customizable content. Ideally, you’d want to wrap this into a plugin, but I’m going to<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5],"tags":[],"yoast_head":"\nHow To Make A Web Accessible Disclosure Toggle Using Shortcodes<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.intelliwolf.com\/how-to-make-a-web-accessible-disclosure-toggle-using-shortcodes\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How To Make A Web Accessible Disclosure Toggle Using Shortcodes\" \/>\n<meta property=\"og:description\" content=\"I spoke previously about how to make Divi's toggle module web accessible, but what if you weren't using Divi? I needed to have a disclosure pattern toggle independent of any theme. It needed to be setup using a shortcode with customizable content. Ideally, you'd want to wrap this into a plugin, but I'm going to\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.intelliwolf.com\/how-to-make-a-web-accessible-disclosure-toggle-using-shortcodes\/\" \/>\n<meta property=\"og:site_name\" content=\"Intelliwolf\" \/>\n<meta property=\"article:published_time\" content=\"2020-09-15T22:46:41+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-09-15T22:46:43+00:00\" \/>\n<meta name=\"author\" content=\"Mike Haydon\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Mike Haydon\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.intelliwolf.com\/how-to-make-a-web-accessible-disclosure-toggle-using-shortcodes\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.intelliwolf.com\/how-to-make-a-web-accessible-disclosure-toggle-using-shortcodes\/\"},\"author\":{\"name\":\"Mike Haydon\",\"@id\":\"https:\/\/www.intelliwolf.com\/#\/schema\/person\/7209e3ff14822e4d70d5f194a310f343\"},\"headline\":\"How To Make A Web Accessible Disclosure Toggle Using Shortcodes\",\"datePublished\":\"2020-09-15T22:46:41+00:00\",\"dateModified\":\"2020-09-15T22:46:43+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.intelliwolf.com\/how-to-make-a-web-accessible-disclosure-toggle-using-shortcodes\/\"},\"wordCount\":481,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.intelliwolf.com\/#organization\"},\"articleSection\":[\"Theme Customization\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.intelliwolf.com\/how-to-make-a-web-accessible-disclosure-toggle-using-shortcodes\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.intelliwolf.com\/how-to-make-a-web-accessible-disclosure-toggle-using-shortcodes\/\",\"url\":\"https:\/\/www.intelliwolf.com\/how-to-make-a-web-accessible-disclosure-toggle-using-shortcodes\/\",\"name\":\"How To Make A Web Accessible Disclosure Toggle Using Shortcodes\",\"isPartOf\":{\"@id\":\"https:\/\/www.intelliwolf.com\/#website\"},\"datePublished\":\"2020-09-15T22:46:41+00:00\",\"dateModified\":\"2020-09-15T22:46:43+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.intelliwolf.com\/how-to-make-a-web-accessible-disclosure-toggle-using-shortcodes\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.intelliwolf.com\/how-to-make-a-web-accessible-disclosure-toggle-using-shortcodes\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.intelliwolf.com\/how-to-make-a-web-accessible-disclosure-toggle-using-shortcodes\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.intelliwolf.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Theme Customization\",\"item\":\"https:\/\/www.intelliwolf.com\/category\/theme-customization\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"How To Make A Web Accessible Disclosure Toggle Using Shortcodes\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.intelliwolf.com\/#website\",\"url\":\"https:\/\/www.intelliwolf.com\/\",\"name\":\"Intelliwolf\",\"description\":\"WordPress, Web Design & Coding Tutorials\",\"publisher\":{\"@id\":\"https:\/\/www.intelliwolf.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.intelliwolf.com\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.intelliwolf.com\/#organization\",\"name\":\"Intelliwolf\",\"url\":\"https:\/\/www.intelliwolf.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.intelliwolf.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.intelliwolf.com\/wp-content\/uploads\/intelliwolf-logo-300t.png\",\"contentUrl\":\"https:\/\/www.intelliwolf.com\/wp-content\/uploads\/intelliwolf-logo-300t.png\",\"width\":300,\"height\":100,\"caption\":\"Intelliwolf\"},\"image\":{\"@id\":\"https:\/\/www.intelliwolf.com\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.intelliwolf.com\/#\/schema\/person\/7209e3ff14822e4d70d5f194a310f343\",\"name\":\"Mike Haydon\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.intelliwolf.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/d5f4754fae310a04dede91d15e57c8a0?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/d5f4754fae310a04dede91d15e57c8a0?s=96&d=mm&r=g\",\"caption\":\"Mike Haydon\"},\"sameAs\":[\"https:\/\/intelliwolf.com\/about-mike-haydon\/\"]}]}<\/script>\n","yoast_head_json":{"title":"How To Make A Web Accessible Disclosure Toggle Using Shortcodes","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:\/\/www.intelliwolf.com\/how-to-make-a-web-accessible-disclosure-toggle-using-shortcodes\/","og_locale":"en_US","og_type":"article","og_title":"How To Make A Web Accessible Disclosure Toggle Using Shortcodes","og_description":"I spoke previously about how to make Divi's toggle module web accessible, but what if you weren't using Divi? I needed to have a disclosure pattern toggle independent of any theme. It needed to be setup using a shortcode with customizable content. Ideally, you'd want to wrap this into a plugin, but I'm going to","og_url":"https:\/\/www.intelliwolf.com\/how-to-make-a-web-accessible-disclosure-toggle-using-shortcodes\/","og_site_name":"Intelliwolf","article_published_time":"2020-09-15T22:46:41+00:00","article_modified_time":"2020-09-15T22:46:43+00:00","author":"Mike Haydon","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Mike Haydon","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.intelliwolf.com\/how-to-make-a-web-accessible-disclosure-toggle-using-shortcodes\/#article","isPartOf":{"@id":"https:\/\/www.intelliwolf.com\/how-to-make-a-web-accessible-disclosure-toggle-using-shortcodes\/"},"author":{"name":"Mike Haydon","@id":"https:\/\/www.intelliwolf.com\/#\/schema\/person\/7209e3ff14822e4d70d5f194a310f343"},"headline":"How To Make A Web Accessible Disclosure Toggle Using Shortcodes","datePublished":"2020-09-15T22:46:41+00:00","dateModified":"2020-09-15T22:46:43+00:00","mainEntityOfPage":{"@id":"https:\/\/www.intelliwolf.com\/how-to-make-a-web-accessible-disclosure-toggle-using-shortcodes\/"},"wordCount":481,"commentCount":0,"publisher":{"@id":"https:\/\/www.intelliwolf.com\/#organization"},"articleSection":["Theme Customization"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.intelliwolf.com\/how-to-make-a-web-accessible-disclosure-toggle-using-shortcodes\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.intelliwolf.com\/how-to-make-a-web-accessible-disclosure-toggle-using-shortcodes\/","url":"https:\/\/www.intelliwolf.com\/how-to-make-a-web-accessible-disclosure-toggle-using-shortcodes\/","name":"How To Make A Web Accessible Disclosure Toggle Using Shortcodes","isPartOf":{"@id":"https:\/\/www.intelliwolf.com\/#website"},"datePublished":"2020-09-15T22:46:41+00:00","dateModified":"2020-09-15T22:46:43+00:00","breadcrumb":{"@id":"https:\/\/www.intelliwolf.com\/how-to-make-a-web-accessible-disclosure-toggle-using-shortcodes\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.intelliwolf.com\/how-to-make-a-web-accessible-disclosure-toggle-using-shortcodes\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.intelliwolf.com\/how-to-make-a-web-accessible-disclosure-toggle-using-shortcodes\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.intelliwolf.com\/"},{"@type":"ListItem","position":2,"name":"Theme Customization","item":"https:\/\/www.intelliwolf.com\/category\/theme-customization\/"},{"@type":"ListItem","position":3,"name":"How To Make A Web Accessible Disclosure Toggle Using Shortcodes"}]},{"@type":"WebSite","@id":"https:\/\/www.intelliwolf.com\/#website","url":"https:\/\/www.intelliwolf.com\/","name":"Intelliwolf","description":"WordPress, Web Design & Coding Tutorials","publisher":{"@id":"https:\/\/www.intelliwolf.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.intelliwolf.com\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.intelliwolf.com\/#organization","name":"Intelliwolf","url":"https:\/\/www.intelliwolf.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.intelliwolf.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.intelliwolf.com\/wp-content\/uploads\/intelliwolf-logo-300t.png","contentUrl":"https:\/\/www.intelliwolf.com\/wp-content\/uploads\/intelliwolf-logo-300t.png","width":300,"height":100,"caption":"Intelliwolf"},"image":{"@id":"https:\/\/www.intelliwolf.com\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/www.intelliwolf.com\/#\/schema\/person\/7209e3ff14822e4d70d5f194a310f343","name":"Mike Haydon","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.intelliwolf.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/d5f4754fae310a04dede91d15e57c8a0?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/d5f4754fae310a04dede91d15e57c8a0?s=96&d=mm&r=g","caption":"Mike Haydon"},"sameAs":["https:\/\/intelliwolf.com\/about-mike-haydon\/"]}]}},"_links":{"self":[{"href":"https:\/\/www.intelliwolf.com\/wp-json\/wp\/v2\/posts\/1916"}],"collection":[{"href":"https:\/\/www.intelliwolf.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.intelliwolf.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.intelliwolf.com\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.intelliwolf.com\/wp-json\/wp\/v2\/comments?post=1916"}],"version-history":[{"count":3,"href":"https:\/\/www.intelliwolf.com\/wp-json\/wp\/v2\/posts\/1916\/revisions"}],"predecessor-version":[{"id":1922,"href":"https:\/\/www.intelliwolf.com\/wp-json\/wp\/v2\/posts\/1916\/revisions\/1922"}],"wp:attachment":[{"href":"https:\/\/www.intelliwolf.com\/wp-json\/wp\/v2\/media?parent=1916"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.intelliwolf.com\/wp-json\/wp\/v2\/categories?post=1916"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.intelliwolf.com\/wp-json\/wp\/v2\/tags?post=1916"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}