"use strict";

$(document).ready(function () {

  var showFirst = true,
      activeClass = 'js-active',
      sections = [],
      headingIcon = '<span class="icon icon--toggle"></span><span class="visually-hidden">Hide this section</span>';

  function toggleSection(e, options){
    var data = e.data;
    data.trigger.toggleClass(activeClass);
    data.target.toggleClass(activeClass);
  }

  $('.collapsible').each(function(i,el){
    var $el = $(el);

    sections[i] = {
      index: i,
      trigger: $el,
      target: $el.next('.collapsible-section')
    }

    var buttonTitle = sections[i].trigger.text();
    sections[i].trigger.html('<button class="button--unstyled">' + headingIcon + buttonTitle  + '</button>');
    sections[i].trigger.on('click', sections[i], toggleSection);

    if(showFirst && i >= 1){
      sections[i].trigger.trigger('click');
    }
  })

});
@@ -8,16 +8,165 @@
 rict%22;%0A%0A
+// Add the aria hidden attribute to the collapsible content section.%0A//var showTip = function(el) %7B%0A//  el.setAttribute('aria-hidden', 'true');%0A//%7D%0A%0A
 $(docume
@@ -267,16 +267,107 @@
 ns = %5B%5D,
+%0A%0A// variable need to be refactored so it can toggle between %22hide this text%22 and %22show...%22
 %0A      h
@@ -453,12 +453,12 @@
 en%22%3E
-Hide
+Show
  thi
@@ -477,16 +477,17 @@
 pan%3E';%0A%0A
+%0A
   functi
@@ -493,66 +493,363 @@
 ion 
-toggleSection(e, options)%7B%0A    var data = e.data
+show(i)%7B%0A    var item = sections%5Bi%5D;%0A    item.icon.text('Show this section');%0A    item.trigger.removeClass(activeClass);%0A    item.target.removeClass(activeClass);%0A    item.target.removeAttr('aria-hidden');%0A    item.hidden = false;%0A    console.log(item)%0A  %7D%0A%0A  function hide(i)%7B%0A    var item = sections%5Bi%5D;%0A    item.icon.text('Hide this section')
 ;%0A    
-data
+item
 .tri
@@ -853,22 +853,19 @@
 trigger.
-toggle
+add
 Class(ac
@@ -884,20 +884,20 @@
     
-data
+item
 .target.
 togg
@@ -892,22 +892,19 @@
 .target.
-toggle
+add
 Class(ac
@@ -915,21 +915,91 @@
 Class);%0A
+    item.target.attr('aria-hidden', 'true');%0A    item.hidden = true;%0A
   %7D%0A%0A
+%0A
   $('.co
@@ -1155,23 +1155,81 @@
 ection')
-%0A    %7D%0A
+,%0A      hidden: $el.hasClass(activeClass)%0A    %7D%0A%0A    // Setup DOM
 %0A    var
@@ -1401,57 +1401,209 @@
 %5Bi%5D.
-trigger.on('click', sections%5Bi%5D, toggleSection);%0A
+icon = sections%5Bi%5D.trigger.find('.visually-hidden');%0A%0A    // Bind events%0A    sections%5Bi%5D.trigger.on('click', i, function()%7B%0A      (sections%5Bi%5D.hidden)? show(i) : hide(i);%0A    %7D);%0A%0A    // Trigger events
 %0A   

Add toggled show hide message and aria role to js.