html - jQuery toggle with divs hierarchy -
html - jQuery toggle with divs hierarchy -
i'm working on tasks list "hierarchy" (see illustration below):
<div class="holder"> <div class="element"> element #1 </div> <div class="elements"> <div class="holder"> <div class="element"> element #2 </div> <div class="elements"> <div class="holder"> <div class="element"> element #3 </div> <div class="elements"> <!-- empty --> </div> </div> </div> </div> </div> </div>
with next jquery
code:
$('div.element').click(function(){ $(this) .closest('div.holder') .find('div.elements') .eq(0) .toggle(); });
question:
it's opening , closing div.elements
supposed to, illustration if i'm opening div's
, , closing element #1
div
- want close every other div.elements
within clicked div.holder
.
adding fiddle.
working demo
check snippet,
you need hide kid elements too, parent element click.
$('div.element').click(function () { $(this) .closest('div.holder') .find('div.elements') .eq(0) .toggle('fast',function () { $(this).find('div.elements').hide() }); });
jquery html css toggle
Comments
Post a Comment