Im stuck with my Accordion
Hi all,
I wonder if anyone could help me solve this problem.
basically i want to be able to toggle all H3 when i click on the h2 and toggle all div.content once i click on span..how can i achieve this
here is the code:
$(document).ready(function(){
$('div.content').hide();
$("h2.showall:first").addClass("clicked");
$(".seasonBlock:not(:first)").hide();
$('.rightCol h3').click(function(){
$(this).next('.content').slideToggle('slow').siblings('div.content:visible').slideUp('slow');
$(this).toggleClass('active');
$(this).siblings('h3').removeClass('active');
});
$("h2.showall").click(function(){
$(this).next(".seasonBlock").slideToggle("slow")
.siblings(".seasonBlock:visible").slideUp("slow");
$(this).toggleClass("clicked");
$(this).siblings("h2").removeClass("clicked");
});
$('span.showTitle').click(function() {
$('.seasonBlock').show();
$(this).toggleClass("clicked");
$(this).siblings("h2").removeClass("clicked");
});
});
HTML
<html>
<body>
<div class="rightCol">
<h2 class="showall"><span class="showTitle">First
Title</span></h2>
<div class="seasonBlock">
<h3>Architecture</h3>
<div class="content">
<!--Content goes in here-->
</div>
<div class="content">
<!--Content goes in here-->
</div>
<div class="content">
<!--Content goes in here-->
</div>
<h3>Interior Design</h3>
<div class="content">
<!--Content goes in here-->
</div>
<div class="content">
<!--Content goes in here-->
</div>
<div class="content">
<!--Content goes in here-->
</div>
</div>
<h2 class="showall"><span class="showTitle">Second
Title</span></h2>
<div class="seasonBlock">
<h3>Architecture</h3>
<div class="content">
<!--Content goes in here-->
</div>
<div class="content">
<!--Content goes in here-->
</div>
<div class="content">
<!--Content goes in here-->
</div>
<h3>Interior Design</h3>
<div class="content">
<!--Content goes in here-->
</div>
<div class="content">
<!--Content goes in here-->
</div>
<div class="content">
<!--Content goes in here-->
</div>
</div>
</div>
</body>
</html>