[jQuery] expandable divs problem

[jQuery] expandable divs problem


Hello As you can see on the code provided below I have expandable
boxes and want some of them to be opened by default. I achieved this
feature but when clicking on the heading to close the initially opened
div the background of the header remain as opened and only on second
click it removes the active class. But box is going to open. So I have
active class heading background on not active heading. Can anyone help
me with this??
You can check live demo on http://codelab.gr/dev/boote/index.html
(the problem is on sidebar)
// JavaScript
<script type="text/javascript">
$(document).ready(function(){
$(".toggle_container").hide();
$(".expanded").show();
$("h3.expand_heading").toggle(function(){
$(this).addClass("active");
}, function () {
$(this).removeClass("active");
});
$("h3.expand_heading").click(function(){
$(this).next(".toggle_container").slideToggle
("slow,");
});
});
</script>
// HTML
<h3 class="expand_heading active"><a href="#">Galerie</a></h3>
<div id="galerie" class="toggle_container expanded">
<div class="box clearfix">
<a href="#"><img src="images/gal.gif" alt="" /></a>
<a href="#"><img src="images/gal.gif" alt="" /></a>
<a href="#"><img src="images/gal.gif" alt="" /></a>
</div>
</div>
// CSS
h3.expand_heading { background: url(../images/
expandable-closed.gif)
no-repeat; }
h3.expand_heading a { background:url(../images/
expandable-
closed.gif); display:block; cursor:hand; }
h3.active { background:url(../images/expandable-open.gif) !
Important; }
h3.active a { background:url(../images/expandable-open.gif) !
Important; }