CODEWITHSUNDEEP
javascriptjqueryhide
user1049997
user1049997

Reputation: 1593

Jquery Div Element Hide

I have a div (main div) which contains several div elements(sub divs). I want to hide all inside div elements using Jquery. Can any body help me. But main div should display always.

Upvotes: 2

Views: 361

Answers (3)

Sibin Muhammed A R
Sibin Muhammed A R

Reputation: 1432

Try this way,works fine

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

Upvotes: 0

Yorgo
Yorgo

Reputation: 2678

and also you can animate the hiding like this:

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

these are simple jquery animations.

Upvotes: 0

jAndy
jAndy

Reputation: 236192

Should be easy as:

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

to hide only all direct children from #mainDiv or

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

to hide any descendant div of #mainDiv.

Upvotes: 4

Related Questions