var collapsedIndicator = '▹';
var expandedIndicator = '▿';
var collapsedTextAdd = 'Show';
var expandedTextAdd = 'Hide';

$(function() {
  //Get collapsible elements
  var collapse = $(".collapsible");

  //Set up collapsible elements
  collapse.each(function () {
    var indicator;
    //Set proper indicator,
    if ($(this).hasClass('collapsed')) {
      indicator = collapsedIndicator;
      $(this).children().not('.collapse-trigger').hide();
      //$('.collapse-trigger', this).show();
      textAdd = collapsedTextAdd;
    }
    else {
      indicator = expandedIndicator;
      textAdd = expandedTextAdd;
    }
    //Replace trigger text
    thisTrigger = $('.collapse-trigger', this);
    thisTrigger.prepend('<span class="text-add">' + textAdd + '</span> ');
    thisTrigger.append(' <span class="collapse-indicator">' + indicator + '</span>');
  });

  //Click function
  $(".collapse-trigger", collapse).click(function() {
    var collapser = $(this).parent();
    if (collapser.hasClass('collapsed')) {
      expandElement(collapser);
    }
    else {
      collapseElement(collapser);
    }
  });

});

function collapseElement(element) {
  element.children().not('.collapse-trigger').hide('fast');
  element.addClass('collapsed');
  $('.collapse-indicator', element).text(collapsedIndicator);
  $('.text-add', element).text(collapsedTextAdd);
}

function expandElement(element) {
  element.removeClass('collapsed').children().not('.collapse-trigger').show('fast');
  $('.collapse-indicator', element).text(expandedIndicator);
  $('.text-add', element).text(expandedTextAdd);
}