javascript - What's the correct selector to use for this jQuery slideUp code? -

javascript - What's the correct selector to use for this jQuery slideUp code? -

i using foundation create page have multiple collapsed buttons. when click on button, hidden content within slide downwards , if there expanded buttons slide up.

i have partially working, because have buttons in pairs of 2 can't figure out right selector expanded divs close regardless of they're positioned.

here html:

<div class="large-6 columns"> <div class="box"> initial content <div class="hidden"> hidden content </div> </div> <div class="box"> initial content <div class="hidden"> hidden content </div> </div> </div> <div class="large-6 columns"> <div class="box"> initial content <div class="hidden"> hidden content </div> </div> <div class="box"> initial content <div class="hidden"> hidden content </div> </div> </div>

css:

.box { height:auto; background:#000; color:#fff; cursor:pointer; width:200px; margin-bottom:1em; } .hidden { height:200px; display:none; } .hidden.open { display:block; }

and javascript:

$(document).ready(function() { $('.box').click(function() { $(this).find('.hidden').slidetoggle(); $(this).siblings().find('.hidden').slideup(); homecoming false; }); });

here jsfiddle demonstrate have far.

you add together 1 line take care of it:

$(this).parent().siblings().find('.hidden').slideup();

jsfiddle example

javascript jquery html slidetoggle slideup