jQuery Slidetoggle issues
I have a number of filters in the side menu of my page, which allow a user to filter the results that are displayed on the page.  I'm using jQuery slidetoggle to toggle the display of the filter items.

The html is as follows:

    <div id="refinement-container">
    <a href="#" class="closed">PRODUCT</a>
    <ul id="product" class="items">    	 
        <li>items...</li>
    </ul>
    </div>

and the jQuery I have so far is:

    jQuery(document).ready(function() {
      jQuery(".items").hide();
      //toggle the componenet with class msg_body
      jQuery(".closed").click(function()
      {
        jQuery(this).next("ul.items").slideToggle(500);
       	jQuery(this).next("ul.items").class('opened');
    
      });
      
     jQuery(".opened").click(function()
      {
        jQuery(this).next("ul.items").slideToggle(500);
       	jQuery(this).next("ul.items").class('closed');
    
      });
    }); 

The toggling works fine.  But the class is not changing on toggle, I'd like this to change so that I can change the background image of the link from + to - or vice versa.  I also tried toggleclass and addclass and removeclass, and nothing worked.  

Also I want to be able to add another html element between the ul that is being toggled and the link that I click on to toggle it as follows:

    <div id="refinement-container">
    <a href="#" class="closed">PRODUCT</a><a href="" class="clear">clear</a>
    <ul id="product" class="items">    	 
        <li>items...</li>
    </ul>
    </div>

But whenever I add an element in between, the toggle function stop working.  Is there a way around this?

Can anyone help me out with this please?

Thank you in advance








jQuery Slidetoggle issues
===

I have a number of filters in the side menu of my page, which allow a user to filter the results that are displayed on the page.  I'm using jQuery slidetoggle to toggle the display of the filter items.

The html is as follows:

    <div id="refinement-container">
    <a href="#" class="closed">PRODUCT</a>
    <ul id="product" class="items">    	 
        <li>items...</li>
    </ul>
    </div>

and the jQuery I have so far is:

    jQuery(document).ready(function() {
      jQuery(".items").hide();
      //toggle the componenet with class msg_body
      jQuery(".closed").click(function()
      {
        jQuery(this).next("ul.items").slideToggle(500);
       	jQuery(this).next("ul.items").class('opened');
    
      });
      
     jQuery(".opened").click(function()
      {
        jQuery(this).next("ul.items").slideToggle(500);
       	jQuery(this).next("ul.items").class('closed');
    
      });
    }); 

The toggling works fine.  But the class is not changing on toggle, I'd like this to change so that I can change the background image of the link from + to - or vice versa.  I also tried toggleclass and addclass and removeclass, and nothing worked.  

Also I want to be able to add another html element between the ul that is being toggled and the link that I click on to toggle it as follows:

    <div id="refinement-container">
    <a href="#" class="closed">PRODUCT</a><a href="" class="clear">clear</a>
    <ul id="product" class="items">    	 
        <li>items...</li>
    </ul>
    </div>

But whenever I add an element in between, the toggle function stop working.  Is there a way around this?

Can anyone help me out with this please?

Thank you in advance







