$('.top').on('click', function() { $parent_box = $(this).closest('.box'); $parent_box.siblings().find('.bottom').slideUp(); $parent_box.find('.bottom').slideToggle(1000, 'swing'); });
<div class="container"> <div class="box"> <div class="top"> click me </div> <div class="bottom"> door #1 </div> </div> <div class="box"> <div class="top"> click me </div> <div class="bottom"> door #2 </div> </div> <div class="box"> <div class="top"> click me </div> <div class="bottom"> door #3 </div> </div> </div>
.container .box { float: left; width: 150px; margin: 20px; } .container .box .top { padding: 12px; background-color: blue; color: white; cursor: pointer; } .container .box .bottom { padding: 12px; background-color: red; color: white; display: none; }