simple Toggle with CSS & jQuery, problems with icons to show state!
<p>I am trying to use make a simple Toggle with CSS &amp; jQuery for a project. 
My problem is when one item is open, and another is clicked. The icon is changing when clicked to let the user see that it is possible to expand or collaps (+ -). When one is clicked, the open ones are closed as I want it to, BUT the icon is not changing back to the + for the closed ones.</p>

<p>Dos anybody have a solution for that??</p>

<p>My file looks like this:</p>

<pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; 
&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; 
&lt;head&gt; 
&lt;meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /&gt; 
&lt;link rel="stylesheet" type="text/css" media="print" href="print.css" /&gt; 
&lt;title&gt;Simple Toggle with CSS &amp;amp; jQuery by Soh Tanaka&lt;/title&gt; 
&lt;style type="text/css"&gt; 

.container {
 width:200px;
 min-height:490px;
 position:absolute;
 top: 120px;
 left:810px;
 background-color:#f4f3f3;
 padding:5px;
 }

h2.trigger {
 padding: 0 0 0 20px;
 margin: 0 0 5px 0;
 background: url(pics/PlusMinus.gif) no-repeat;
 height: 16px;
 line-height: 16px;
 width: 250px;
 font-size: 16px;
 font-weight: normal;
 float: left;
}
h2.trigger a {
 color: #000;
}

h2.active {
background-position: left bottom;
}



&lt;/style&gt; 
&lt;script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"&gt;&lt;/script&gt; 

&lt;script type="text/javascript"&gt; 
$(document).ready(function(){
 //Hide (Collapse) the toggle containers on load
 $(".toggle_container").hide();
 //Slide up and down &amp; toogle the Class on click

$("h2.trigger").click(function(){
$(this).toggleClass("active").next().slideToggle("slow");
$(this).siblings().next("div.toggle_container").toggleClass("active").slideUp("slow");


});return false;
})
&lt;/script&gt;



&lt;/head&gt; 

&lt;body&gt; 

&lt;div class="container"&gt; 
 &lt;h2 class="trigger"&gt;&lt;a href="#"&gt;Property&lt;/a&gt;&lt;/h2&gt; 
 &lt;div class="toggle_container"&gt; 

   &lt;a href="#" id=""&gt;1&lt;/a&gt;&lt;br /&gt;
    &lt;a href="#"id=""&gt;2&lt;/a&gt;
    &lt;br /&gt;
    &lt;a href="#" id=""&gt;3&lt;/a&gt;
    &lt;br /&gt; &lt;br /&gt; 
 &lt;/div&gt; 

 &lt;br /&gt;&lt;br /&gt;
 &lt;h2 class="trigger"&gt;&lt;a href="#"&gt;Hotel&lt;/a&gt;&lt;/h2&gt; 
 &lt;div class="toggle_container"&gt; 
   &lt;p&gt;Praesent duis vel similis usitas camur, nostrud eros opes verto epulae feugiat ad. Suscipit modo magna letalis amet et tego accumsan facilisi, meus. Vindico luptatum blandit ulciscor mos caecus praesent sed meus velit si quis lobortis praemitto, uxor. &lt;/p&gt; 
  &lt;/div&gt; 

 &lt;br /&gt;&lt;br /&gt;
 &lt;h2 class="trigger"&gt;&lt;a href="#"&gt;Other&lt;/a&gt;&lt;/h2&gt; 
 &lt;div class="toggle_container"&gt; 
   &lt;p&gt;Praesent duis vel similis usitas camur, nostrud eros opes verto epulae feugiat ad. Suscipit modo magna letalis amet et tego accumsan facilisi, meus. Vindico luptatum blandit ulciscor mos caecus praesent sed meus velit si quis lobortis praemitto, uxor. &lt;/p&gt; 
  &lt;/div&gt; 


   &lt;/div&gt;

&lt;/body&gt; 
&lt;/html&gt; 
</code></pre>

<p>I hope you can help.</p>

<p>Thanks Sara</p>
