HTML
<button type="button" class="button-collapse" >
collapsible
</button> </br>
<div id="demo" class="collapse">
Sample text
</div>
JQuery
$(document).ready(function() {
$(".button-collapse").click(function() {
$(".collapse").slideToggle();
});
});
Мой код довольно прост. Я хочу создать div/show/hide/toggle. Как я могу добиться этого, чтобы только один div с соответствующей кнопкой переключался? Прямо сейчас все мои divs переключаются. Я не хочу назначать уникальные идентификаторы для своих элементов html, потому что элементы переключения будут динамически создаваться позже с помощью php.
Вы можете использовать $(this).nextAll('div.collapse:first')
, который получит первое следующее вхождение div.collapse
.
.next()
не будет работать, так как следующий непосредственный брат - это разрыв строки (<br/>
);
$(".button-collapse").click(function() {
$(this).nextAll('div.collapse:first').slideToggle();
});
Вы можете использовать .next()
для таргетинга на следующий элемент. Попробуй это:
$(".button-collapse").click(function() {
$(this).next().slideToggle();
});
Вы можете использовать первую кнопку nextAll, как показано ниже.
$(".button-collapse").click(function() {
$(this).nextAll(".collapse:first").slideToggle();
});
Вот работающий JSFiddle