Collapsible v1

by pmamode

HTML

<div id="accordion">
  <div class="show">Show All</div><div class="hide">Hide All</div>
  <hr>
  <div class="accordion-toggle right-arrow">Accordion 1</div>
  <div class="accordion-content default">
    <div>Cras malesuada ultrices augue molestie risus.</div>
  </div>
  <hr>
  <div class="accordion-toggle right-arrow">Accordion 2</div>
  <div class="accordion-content">
    <div>Lorem ipsum dolor sit amet mauris eu turpis.</div>
  </div>
  <hr>
  <div class="accordion-toggle right-arrow">Accordion 3</div>
  <div class="accordion-content">
    <div>Vivamus facilisisnibh scelerisque laoreet.</div>
  </div>
  <hr>
</div>
<div id="output">\25ba</div>

CSS

.accordion-toggle {
    cursor: pointer;
  }
  
  .accordion-content {
    display: none;
  }
  
  .right-arrow:before {
    content: '\25ba';
    font-size: small
  }
  
  .down-arrow:before {
    content: '\25bc';
    font-size: small
  }
  
  .show, .hide {
    cursor: pointer;
  }

JavaScript

$(document).ready(function ($) {
    $('#accordion').find(".show-hide").click(function () {
      $(".show-hide").text() == "Show All" ?
        ($(".show-hide").text("Hide All"), $(".accordion-toggle").removeClass("right-arrow").addClass("down-arrow"), $(".accordion-content").hide()) :
        ($(".show-hide").text("Show All"), $(".accordion-toggle").removeClass("down-arrow").addClass("right-arrow"), $(".accordion-content").show());

      $(".accordion-content").toggle();

    });

    $('#accordion').find('.accordion-toggle').click(function () {
      //Expand or collapse this panel
      $(this).toggleClass("right-arrow down-arrow");
      $(this).next().toggle();

      if ($('#accordion').find('.accordion-content').is(':visible')) {
        $(".show-hide").text("Hide All");
      } else {
        $(".show-hide").text("Show All");
      }

      //$("#output").html("test");
      //Hide the other panels
      //$(".accordion-content").not($(this).next()).slideUp('fast');
    });

  });