CODEWITHSUNDEEP
jquery
Matt Elhotiby
Matt Elhotiby

Reputation: 44086

How do i show a hidden div when a checkbox is clicked using jQuery?

<div id="name">

</div>   

<input type="checkbox" name="myCB" value="A" />Couldn't find the Venue<br />

I can add an Id or class if i need to

I need to toggle between hide and show the div based on the whether clicked or not

Upvotes: 1

Views: 4222

Answers (4)

Saurabh Kumar
Saurabh Kumar

Reputation: 2367

Try this:

<div id="name">
my div text
</div>   

<input type="checkbox" name="myCB" id="myCB" value="A"/>Couldn't find the Venue<br />

<script>
$('#myCB').toggle(function() {
$('#name').hide()
}, function() {
$('#name').show()
});
</script>

Upvotes: 0

Pramendra Gupta
Pramendra Gupta

Reputation: 14873

Here is ready to use and simple code

$('input[name=myCB]').toggle(function() {
  $("#name").hide();
}, function() {
  $("#name").show();
});

Upvotes: 0

Reigel Gallarde
Reigel Gallarde

Reputation: 65284

<input type="checkbox" name="myCB" value="A" class="toggler" cheked="checked" />

and without animation,

$(function(){
   $('.toggler').click(function(){
       $('div#name').toggle(this.checked);
   });
})

cool demo

this with a little animation

$(function(){
   $('.toggler').click(function(){
       if (this.checked) {
           $('div#name').slideDown();
       } else {
           $('div#name').slideUp();
       }
   });
})​

cool demo too

Upvotes: 4

Oren Mazor
Oren Mazor

Reputation: 4487

given your checkbox ID is myCB:

$("#myCB").click(function(){

if($("#name").is(":visible"))
{
  $("#name").hide();
}
else
{
  $("#name").show();
}

});

you can also check out the .toggle() function:

http://api.jquery.com/toggle/

Upvotes: 0

Related Questions