jQuery open / close divs based on selected item -

jQuery open / close divs based on selected item -

i trying create little application people can edit specific areas on page (like little cms)

i have next html

<div class="main"> <div class="zone"> <div class="editor"> <ul> <li>bold</li> <li>italic</li> </ul> </div> <div class="content">some content</div> </div> <div class="zone"> <div class="editor"> <ul> <li>bold</li> <li>italic</li> </ul> </div> <div class="content">some more content</div> </div> </div>

what i'm looking do, if click on zone editor div shown particular zone. others must close (since i'm not editing zone)

jquery:

jquery(document).ready(function(){ jquery().find('div.editor').hide(); jquery(".main").selectable({ filter: 'div:not(.content)' }); jquery(".zone").each(function() { jquery(this).find(".content").click(function(e) { var parent = jquery(this).parent().parent(); var selected = parent.find('div.zone.ui-selected'); selected.find('div.editor').show(); }); }); });

thanks

your hide() function executed 1 time - on domready after page loaded.

you have move hide-code within click function

jquery(this).find(".content").click(function(e) { jquery().find('div.editor').hide(); var parent = jquery(this).parent().parent(); var selected = parent.find('div.zone.ui-selected');

e: mentioned have add together hide() within click event.

$('div.editor').hide();

also shouldn't utilize js hide content. utilize css display:none prevent show/hide on pageload. see here:

http://jsfiddle.net/aavc5/4/

jquery jquery-selectors