Jquery div要素非表示

Question

私はいくつかのdiv要素（サブディビジョン）を含むdiv（main div）を持っています。 Jqueryを使用してdiv要素をすべて非表示にしたいどんな体が私を助けることができますか？しかし、メインのdivは常に表示されます。 #mainDivのいずれかの子孫のdivを非表示にする#mainDivまたは

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

からのみすべての直接の子を非表示にする

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

：として

Answer 1

は簡単にする必要があります。

Answer 2

ともあなたはこのように隠ぺいをアニメーション化することができます

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

は、これらは、単純なjQueryのアニメーションです。

Answer 3

は、この方法を試してみて、細かい

<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>