Как сделать динамику slideToggle в JQuery

Question

У меня есть страница, где несколько div и внутри каждого div есть возможность щелкнуть и переключить информацию, которую я могу создать, указав разные идентификаторы DIV, но я думаю, что это можно сделать как-то динамически, вот что я создал в JSFiddle

CSS

.boxwrap { 
    float: left; 
    width: 200px; 
    height: 250px; 
    border: 1px solid #ccc; 
    margin: 0 5px 0 0; 
    text-align: center; 
    box-sizing: border-box; 
    padding: 10px; 
} 
.boxwrap_inner { 
    float: left; 
    width: 100%; 
    background: #ddd; 
    padding: 5px 0; 
    text-align: center; 
} 
.noDisplay { 
    display: none; 
} 

HTML

<div class="boxwrap"> 
    <a href="javascript:;" id="button1">Go</a> 
    <div class="boxwrap_inner noDisplay" id="content1"> 
     Content goes here 
    </div> 
</div> 
<div class="boxwrap"> 
    <a href="javascript:;" id="button2">Go</a> 
    <div class="boxwrap_inner noDisplay" id="content2"> 
     Content goes here 
    </div> 
</div> 

JQuery

$('#button1').click(function() { 
    $("#content1").slideToggle(200); 
}); 
$('#button2').click(function() { 
    $("#content2").slideToggle(200); 
}); 

Answer 1

Проверьте это:

$('.boxwrap > a').click(function() { 
 
    $(this).next().slideToggle(200); 
 
});

.boxwrap { 
 
    float: left; 
 
    width: 200px; 
 
    height: 250px; 
 
    border: 1px solid #ccc; 
 
    margin: 0 5px 0 0; 
 
    text-align: center; 
 
    box-sizing: border-box; 
 
    padding: 10px; 
 
} 
 
.boxwrap_inner { 
 
    float: left; 
 
    width: 100%; 
 
    background: #ddd; 
 
    padding: 5px 0; 
 
    text-align: center; 
 
} 
 
.noDisplay { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="boxwrap"> 
 
    <a href="javascript:;" id="button1">Go</a> 
 
    <div class="boxwrap_inner noDisplay" id="content1"> 
 
     Content goes here 
 
    </div> 
 
</div> 
 
<div class="boxwrap"> 
 
    <a href="javascript:;" id="button2">Go</a> 
 
    <div class="boxwrap_inner noDisplay" id="content2"> 
 
     Content goes here 
 
    </div> 
 
</div>

Answer 2

Попробуйте этот путь,

Лучше указать элемент с его родителем, на котором вы вызываете событие щелчка.

$('.boxwrap > a').click(function(){ 
    $(this).next('div').slideToggle(200); 
}); 

Answer 3

Предыдущие ответы основаны на том, что DOM будет оставаться такой же и следующий элемент() после того, как кнопка будет всегда содержание дел.

Для более надежного решения, я хотел бы добавить класс к кнопкам в boxwrap (т.е. .boxbtn) и класс дивы контента (т.е. boxcontent), а затем я хотел бы сделать что-то вроде следующего:

$('.boxbtn').click(function() { 
    $(this).closest('.boxwrap')..find('.boxcontent').slideToggle(200); 
}); 

Answer 4

Вот с 2 вариантами

1. с использованием относительного значения атрибута
2. с помощью относительного нахождения элемента дон

/*$('.toggle_link').click(function() { 
 
\t $($(this).data('toggle')).slideToggle(200); 
 
}); 
 

 
OR 
 
*/ 
 
$('.toggle_link').click(function() { 
 
\t $(this).parent().find('.noDisplay').slideToggle(200); 
 
});

.boxwrap{float:left; width:200px; height:250px; border:1px solid #ccc; margin:0 5px 0 0; text-align:center; box-sizing:border-box; padding:10px;} 
 
.boxwrap_inner{float:left; width:100%; background:#ddd; padding:5px 0; text-align:center;} 
 
.noDisplay{display:none;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
 
<div class="boxwrap"> 
 
\t <a href="javascript:;" id="button1" data-toggle="#content1" class="toggle_link">Go</a> 
 
    <div class="boxwrap_inner noDisplay" id="content1"> 
 
    \t Content goes here 
 
    </div> 
 
</div> 
 
<div class="boxwrap"> 
 
\t <a href="javascript:;" id="button2" data-toggle="#content2" class="toggle_link">Go</a> 
 
    <div class="boxwrap_inner noDisplay" id="content2"> 
 
    \t Content goes here 
 
    </div> 
 
</div>