javascript - How to hide and show multiple div(s)? -

i have multiple div(s) in code when click on of div hidden division shown want on click of particular div hidden division of slide down , on clicking outside hides

the link code http://jsfiddle.net/evgd6/89/

$(document).ready(function(){      $('.click').click(function(event){          event.stoppropagation();           $(".showup").slidetoggle("fast");      });      $(".showup").on("click", function (event) {          event.stoppropagation();      });  });    $(document).on("click", function () {      $(".showup").hide();  });

body{margin:50px;}    .showup{width:100px;height:100px; background:red; display:none;}  .click{cursor:pointer;}

<div class="click">click me</div>  <div class="showup">something want show</div>  <div class="click">click me</div>  <div class="showup">something want show</div>  <div class="click">click me</div>  <div class="showup">something want show</div>

you need target next element of clicked element. can use .next() along clicked elements context this. this:

$('.click').click(function(event){     event.stoppropagation();     $(this).next().slidetoggle("fast"); }); 

working demo

update:

actually want when click on first click here , click on second 1 div of first 1 should hide , second 1 open

$('.click').click(function(event){     event.stoppropagation();     $(".showup").not($(this).next()).slideup("fast");     $(this).next().slidetoggle("fast"); }); 

demo updated answer