Как скрыть и показать несколько div (s)?

Question

У меня есть несколько div (s) в моем коде, но когда я нажимаю на любой из div, все скрытые деления отображаются, но я хочу, чтобы при щелчке определенного div только скрытое разделение этого слайда вниз и щелкнув по нему скрывает

ссылка на код 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 I want to show</div> 
 
<div class="click">click me</div> 
 
<div class="showup">something I want to show</div> 
 
<div class="click">click me</div> 
 
<div class="showup">something I want to show</div>

Answer 1

Вы должны предназначаться только следующий элемент кликнули элемента. для которого вы можете использовать .next() вместе с контекстом с нажатыми элементами this. Как это:

$('.click').click(function(event){ 
    event.stopPropagation(); 
    $(this).next().slideToggle("fast"); 
}); 

Working Demo

Update:

На самом деле я хочу, чтобы, когда я нажимаю на первый щелчок здесь, а затем нажмите на второй то сНу Первого следует скрыть, а второй открыть

$('.click').click(function(event){ 
    event.stopPropagation(); 
    $(".showup").not($(this).next()).slideUp("fast"); 
    $(this).next().slideToggle("fast"); 
}); 

Demo for updated answer

Answer 2

http://jsfiddle.net/evGd6/90/

$('.click').click(function(event){ 
      event.stopPropagation(); 
      $(this).next(".showup").slideToggle("fast"); 
     }); 

Answer 3

использование $(this).next() для ссылки на следующий элемент, который вы хотите, чтобы показать/скрыть.

Оформить мой ответ в фрагменте кода.

$(document).on('click', '.click', function() { 
 
    $(this).next().slideToggle(); 
 
});

.click { 
 
    border: 1px solid black; 
 
    background-color: whitesmoke; 
 
    padding: 20px; 
 
    display: inline-block; 
 
} 
 
.showup { 
 
    display: none; 
 
    padding-left: 20px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="click">Click Me</div> 
 
<div class="showup">You clicked the first div</div> 
 
<br> 
 
<div class="click">Click Me</div> 
 
<div class="showup">You clicked the Second div</div> 
 
<br> 
 
<div class="click">Click Me</div> 
 
<div class="showup">You clicked the Third div</div>