jquery expand / reduce all items


I have a bunch of items which can be collapsed/exapanded individually by clicking on the icon. I need to modify my code a little more. I need add another icon on top. When you click on that you can expand/collapse all the below items at once. Can someone help me with that part?

Here is my javascript code

$(document).on('show hide', '#programs-accordion', function(e) {
  $(e.target).siblings('.accordion-heading').find('.accordion-toggle i').toggleClass('icon-plus icon-minus');

here is my haml code

  - @patient_summary.programs.each_with_index do |program, index|
          %a{ href: "#collapse-#{index}", data: { parent: '#programs-accordion', toggle: 'collapse' }}
          %a= program.name
         .accordion-body{id: "collapse-#{index}", class: (@office.to_i == office.id) ? "" : "collapse" }
            - office.positions.each_with_index do |position, index|
                      .span2{class: "offices-#{position.status}"}= position.status
                      .span1= position.results.first.value
                      .span2= position.results.first.value_date_time.blank? ? '' : Date.parse(position.results.first.value_date_time)
                      .span5= position.name

EDIT: JS fiddle link below


Maybe something like this:

 $('.expandButton').click(function() {
   $('.accordion-toggle i').removeClass('icon-plus');
   $('.accordion-toggle i').addClass('icon-minus');