jQuery Accordion with Plus and Minus Toggle

jQuery Accordion with Plus and Minus Toggle

by Colin Soderstrom

HTML

<div class="accordion_container">
  <p class="accordion_head">Schedule a Free Consultation<span class="plusminus">+</span></p>
  <div class="accordion_body" style="display: none;">
    <p>First Accordian Body, it will have description</p>
  </div>
</div>

CSS

.accordion_container {
  width: 100%;
}

.accordion_head {
  background-color: red;
  color: white;
  cursor: pointer;
  font-size: 14px;
  margin: 0 0 1px 0;
  padding: 7px 11px;
  font-weight: bold;
}

/*
.accordion_body {
  background: lightgray;
}
*/
.accordion_body p {
  padding: 18px 5px;
  margin: 0px;
}

.plusminus {
  float: right;
}

JavaScript

$(document).ready(function() {
  //toggle the component with class accordion_body
  $(".accordion_head").click(function() {
    if ($('.accordion_body').is(':visible')) {
      $(".accordion_body").slideUp(300);
      $(".plusminus").text('+');
    }
    if ($(this).next(".accordion_body").is(':visible')) {
      $(this).next(".accordion_body").slideUp(300);
      $(this).children(".plusminus").text('+');
    } else {
      $(this).next(".accordion_body").slideDown(300);
      $(this).children(".plusminus").text('-');
    }
  });
});