JQuery Div Элемент Скрыть

Question

У меня есть div (основной div), который содержит несколько элементов div (sub div). Я хочу спрятать все элементы div, используя Jquery. Кто-нибудь может мне помочь. Но основной div должен отображаться всегда.

Answer 1

Должно быть просто, как:

$('#mainDiv > div').hide();

чтобы скрыть только всех прямых детей от #mainDiv или

$('#mainDiv div').hide();

чтобы скрыть любого потомка div от #mainDiv.

Answer 2

Попробуйте вот так, отлично работает

<div style="text-align:center;background-color: lightblue;">Main div
<button id="checkButton"type="button" class="btn btn-primary">Check</button>
<div id="subdiv1" hidden>Sub Div 1</div>
<div id="subdiv2" hidden>Sub Div 2</div>
<div id="subdiv3" hidden>Sub Div 3</div>
<div id="subdiv4" hidden>Sub Div 4</div>
<div id="subdiv5" hidden>Sub Div 5</div>
</div>


<script>
$(document).ready(function(){
$("#checkButton").click(function(){
$("#subdiv1").toggle();
$("#subdiv2").toggle();
$("#subdiv3").toggle();
$("#subdiv4").toggle();
$("#subdiv5").toggle();
});
});
</script>

Answer 3

, а также вы можете анимировать сокрытие следующим образом:

$('#mainDiv div').slideUp();
$('#mainDiv div').slideToggle();
$('#mainDiv div').fadeToggle();

это простые анимации jquery.