jQuery Accordion with Plus and Minus Toggle

jQuery Accordion with Plus and Minus Toggle

by aflynt

HTML

<div class="accordion_container">
		<div class="accordion_head">First Accordian Head<span class="plusminus">+</span></div>
			<div class="accordion_body" style="display: none;">
			<p>First Accordian Body, it will have description</p>
			</div>
		<div class="accordion_head">Second Accordian Head<span class="plusminus">+</span></div>
			<div class="accordion_body" style="display: none;">
			<p>Second Accordian Body, it will have description</p>
			</div>
		<div class="accordion_head">Third Accordian Head<span class="plusminus">+</span></div>
			<div class="accordion_body" style="display: none;">
			<p>Third Accordian Body, it will have description</p>
			</div>
 
	</div>

CSS

.accordion_container {
 	width: 500px;
}
.accordion_head {
	background-color:skyblue;
    color: white;
    cursor: pointer;
    font-family: arial;
    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:left;
}

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('-');
        }
	});
});