Question

on load its look like this.

on expand like this

if i click know how + sign then it will collapse whats new that works fine.

But if click on whats new and again on whats new then collapse works fine
but Image of + sign doesnt change.

I have to change that sign also. please help, Thanks in advance.

HTML

<div class="Wobnavi">
    <ul class="rootFolders">

            <li id="wobsubfolder1">
            <h2 class="more_folders" id="wobsubfolder1"> <a href="#">WHAT'S NEW?</a> </h2>

                   <ul class="subFolders">

                        <li>
                            <a href="#">test</a>
                        </li>

                   </ul>

            </li>

            <li id="WOB-events-folder">
            <h2 class="null" id="WOB-events-folder"> <a href="#">EVENTS</a> </h2>

            </li>

            <li id="wobsubfolder2">
            <h2 class="more_folders" id="wobsubfolder2"> <a href="#">KNOW-HOW</a> </h2>

                   <ul class="subFolders">

                        <li>
                            <a href="#">Legacy &amp; brand values</a>
                        </li>

                   </ul>

            </li>

            <li id="wobsubfolder3">
            <h2 class="null" id="wobsubfolder3"> <a href="#">ATTRACTIONS</a> </h2>

            </li>

            <li id="HERITAGE">
            <h2 class="null" id="HERITAGE"> <a href="#">heritage</a> </h2>

            </li>

    </ul>
</div>

jquery:

jQuery(document).ready(function(){
   jQuery('.Wobnavi .rootFolders h2').click(function(){
    var main = jQuery('.Wobnavi .rootFolders h2');
                 var clk = jQuery(this);
                 var it = main.hasClass('less_folders') ?  (main.removeClass('less_folders'), clk.toggleClass('less_folders')) : clk.toggleClass('less_folders');

var co = jQuery('.subFolders');
                 var el = jQuery(this).next(co);   
                 var doit =  el.is(':hidden') ? ( co.slideUp('1000'), el.slideDown('1000')) : co.slideUp('1000') ;
                });
        });

Answer 1

finally i did it my self.

jQuery('.Wobnavi .rootFolders h2').click(function(){
                     var clk = jQuery(this);
                     if(clk.hasClass('more_folders')){
                         clk.removeClass('more_folders').addClass('less_folders');
                         jQuery('.Wobnavi .rootFolders h2').each(function( index, ele ){
                             if( (jQuery(ele).attr('id') != clk.attr('id')) && (jQuery(ele).hasClass('more_folders') || jQuery(ele).hasClass('less_folders'))){

                                     jQuery(ele).attr('class','more_folders');

                             }
                         });
                     }else if(clk.hasClass('less_folders')){
                         clk.removeClass('less_folders').addClass('more_folders');
                     }

                     var co = jQuery('.subFolders');
                     var el = jQuery(this).next(co);   
                     var doit =  el.is(':hidden') ? ( co.slideUp('1000'), el.slideDown('1000')) : co.slideUp('1000') ;
                });