CODEWITHSUNDEEP
jquerytoggle
stephmoreland
stephmoreland

Reputation: 4173

jQuery toggle closed other elements

I have a number of h3 elements that I toggle when they are clicked within the div where they reside, but what's the best way to open the currently clicked h3 and close the others? Here's my jQuery so far:

$('h3[id^="dd_featprod"]').click(function(){
        var id = $(this).attr('id');
        var theProd = id.split("+")[1];
        var thelist = ".dd_fp" + theProd;
        $(thelist).toggle(500);
});

The HTML has this sort of structure:

<div>
  <ul>
   <li><h3 id="dd_featprod+RW7" class="toggle_closed"><a href="javascript:;">Group</a></h3></li>
  </ul>
  <ol class="dd_fpRW7">
    <li><a href="http://www.abc.com/pdf/specification.pdf" target="_blank">Product One</a></li>
    <li><a href="http://www.abc.com/product.asp?page=geo" target="_blank">Product Two</a></li><ul>
    <li><h3 id="dd_featprod+RW8" class="toggle_closed"><a href="javascript:;">Item one</a></h3></li>
</ul>
    <ol class="dd_fpRW8">
      <li>Sub item one</li>
      <li>Sub item two</li>
    </ol>

Upvotes: 0

Views: 141

Answers (1)

Wallack
Wallack

Reputation: 792

You could try this:

$('h3[id^="dd_featprod"]').click(function(){
        var id = $(this).attr('id');
        var theProd = id.split("+")[1];
        var thelist = ".dd_fp" + theProd;
        $('ol').not(thelist).hide(500);
        $(thelist).toggle(500);
});

When you click an element, initally will close that element (because is opened) and every other element.

Next time you click an element will open that element and close the rest.

DEMO: jsFiddle

Upvotes: 1

Related Questions