У меня такой HTML:
<input type="checkbox" class="chk-class" /> Click to enable<br/>
<div class="hidden">Hidden content here</div>
Я хочу показать содержимое при щелчке по галочке. Итак, здесь JS:
$('.chk-class').bind('click', function(){
$(this).closest('.hidden').show();
});
Почему это не работает?
PS: Я не хочу использовать идентификаторы. Я хочу, чтобы это было динамически назначено, поскольку у меня есть несколько флажков.
Это второй следующий брат из того, что я вижу
$('.chk-class').on('change', function(){
$(this).next().next().toggle();
});
Демо: скрипка
Другой способ (если вы не уверены в элементах между флажком и скрытым)
$('.chk-class').on('change', function () {
$(this).nextUntil('.hidden').last().next().toggle();
});
Демо: скрипка
nextAll
или nextUntil
до кажутся оба работают
$('.chk-class').change(function(){
$(this).next('.hidden').toggle();
});
ближайшие шаги вверх используют next
$(this).next().show();
EDIT используйте nextAll('selector:first')
чтобы отобразить только следующий элемент с определенным class/id etc
$(this).nextAll('.hidden:first').show()
Сначала вы должны скрыть свой hidden
div с отображением: none
.hidden {
display: none;
}
тогда
$(".chk-class").click(function(){
$(".hidden").css("display","block");
});