Question

I got an menu with different slidetoggles in it. the javascript looks like this:

$('.toggler').live('click',function(){
              $(this).parent().children().toggle();  //swaps the display:none between the two spans
              $(this).parent().parent().find('.toggled_content').slideToggle();  //swap the display of the main content with slide action
              $(this).parent().parent().find('.toggled_content2').css('display', 'none');
              $(this).parent().parent().find('.div2').css('display', 'none');
              $(this).parent().parent().find('.ap2').css('display', 'block');
              $(this).parent().parent().find('.toggled_content3').css('display', 'none');
              $(this).parent().parent().find('.div3').css('display', 'none');
              $(this).parent().parent().find('.ap3').css('display', 'block');
              $(this).parent().parent().find('.toggled_content4').css('display', 'none');
              $(this).parent().parent().find('.div4').css('display', 'none');
              $(this).parent().parent().find('.ap4').css('display', 'block');

          });

Now u can see that once i click an .toggler he sets certain area’s to display:none and some to display:block. But what would be more perfect if i can replace this part of code:

$(this).parent().parent().find('.toggled_content2').css('display', 'none');

To some code that checks if the block is open and so yes then it slides to close it. I don’t know if this is possible but it would look nicer if it does.

Thanks in forwards!

Here is the HTML:

                        <div id="spacerouter"><div id="spacer"><div id="spacerin"></div><div id="spacerinr"></div></div></div>
                <div class='toggleHolder'>
                    <div id="company" class='toggler ap1'>
                        <div id="companysiton"></div>
                            <div id="companyname">
                                <h1>Siton Suzenaar</h1>
                                <h2>Hyundai / Opel / Chevrolet</h2>
                            </div><!-- companyname -->
                    </div><!-- company -->
                    <div id="company2" class='toggler div1' style='display:none;'>
                        <div id="companysiton"></div>
                            <div id="companyname">

                                <h2>Hyundai / Opel / Chevrolet</h2>
                            </div><!-- companyname -->
                    </div><!-- company -->
                </div><!-- toggleHolder -->
                <div class='toggled_content' style='display:none;' id="toggled_content">
                    <h3>



                    </h3>
                    <h3>
                    <a href="mailto:[e-mail]">[e-mail]</a><br />

                    </h3>
                </div>

Answer 1

You could use the visible & hidden selectors and add a common class to all your elements that need to be toggled.

$(this).parent().parent().find('.commonClass:visible').css('display', 'none');

$(this).parent().parent().find('.commonClass:hidden').css('display', 'block');

Or better yet

$(this).parent().parent().find('.commonClass').slideToggle()