Reputation: 4173
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
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