Accordion Toggle All but not THIS

by Faisal Khan Janjua

HTML

<div class="loadcalculator active">
  <div class="toggleCalculator"><span class="plus"></span>Toggle 1</div>
  <div class="calculator-content">
    <p>Ut orci lorem, malesuada sed rhoncus quis, dignissim eget erat. Sed accumsan lorem sed libero posuere vitae blandit mi varius. Vestibulum eu dui leo, eget molestie quam. Integer non velit arcu, non tempor nulla.</p>
  </div>
</div>

<div class="loadcalculator">
  <div class="toggleCalculator"><span class="plus"></span>Toggle 2</div>
  <div class="calculator-content">
    <p>Ut orci lorem, malesuada sed rhoncus quis, dignissim eget erat. Sed accumsan lorem sed libero posuere vitae blandit mi varius. Vestibulum eu dui leo, eget molestie quam. Integer non velit arcu, non tempor nulla.</p>
  </div>
</div>

<div class="loadcalculator">
  <div class="toggleCalculator"><span class="plus"></span>Toggle 3</div>
  <div class="calculator-content">
    <p>Ut orci lorem, malesuada sed rhoncus quis, dignissim eget erat. Sed accumsan lorem sed libero posuere vitae blandit mi varius. Vestibulum eu dui leo, eget molestie quam. Integer non velit arcu, non tempor nulla.</p>
  </div>
</div>

CSS

.loadcalculator .calculator-content{
	display: none;
}
.loadcalculator .toggleCalculator .plus{
  float: left;
}
.loadcalculator .toggleCalculator .plus:after{
  content: "+";
  margin-right: 4px;
}
.loadcalculator.active .toggleCalculator .plus:after{
  content: "-";
  margin-right: 4px;
}
.loadcalculator .toggleCalculator {
    width: 100%;
    margin-bottom: 10px;
    padding: 10px;
    background: #BBC4D5;
    border: 1px solid #45536C;
    cursor: pointer;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    border-radius: 6px;
}
.loadcalculator.active .toggleCalculator{
    background: #000;
    color: white;
}
.calculator-content p {
    margin: 0;
    padding: 0 0 10px 0;
}
/*
.loadcalculator{
  width:97%;
}
.loadcalculator:first-child .calculator-content{
  display:block;
}
.loadcalculator .calculator-content{
  display:none;
  padding-bottom: 10px;
}
.loadcalculator.active .calculator-content{
  display:block;
}
*/

JavaScript

jQuery(document).ready(function() {
  /* 
  This script Need CSS 
  jQuery(".toggleCalculator").click(function() {
    if(!jQuery(this).closest(".loadcalculator").hasClass("active")){
      jQuery(".calculator-content").slideUp();
    }
    jQuery(this).next(".calculator-content").slideDown();
    jQuery('.toggleCalculator').closest('.loadcalculator').removeClass('active');
    jQuery(this).closest('.loadcalculator').addClass('active');
  }); */
  
  jQuery('.loadcalculator.active').find('.calculator-content').show();
	jQuery('.loadcalculator').on('click', '.toggleCalculator', function(){
		var toggler= jQuery(this);
		var parent= toggler.parents('.loadcalculator');
		var content= toggler.next('.calculator-content');
		if(!parent.hasClass('active')){
			jQuery('.calculator-content').slideUp();
			jQuery('.loadcalculator').removeClass('active');
			parent.addClass('active');
			content.slideDown();    
		}
	});
});