How to hide/unhide div using javascript?

Question

I have a Checkbox in my index.html file as

@Html.CheckBoxFor(m=>m.isChecked, new { id = "isChecked" })  

<div id='Shipping'> 
      <p> Some textboxes here </p>
</div>

I would like to hide the sipping div if the checkbox is checked and unhide if not checked. And i would like it to be dynamic. How do i do that?

There are literally hundreds of thousands of solutions to this problem all over the internet. This question is just lazy — Liam, Mar 21 '16 at 17:29

score 1 · Answer 1 · answered Mar 21 '16 at 17:33

I guess you'd first bind to the check box's change event:

$('#isChecked').change(function() {
    //...
});

Within that event handler, you'd then show/hide the div based on the state of the check box. Possibly something like this:

if ($(this).is(':checked')) {
    $('#Shipping').show();
} else {
    $('#Shipping').hide();
}

Of course, you'll also want to set an initial value. A simple way to accomplish both would likely be to wrap the logic in a function:

var toggleDiv = function () {
    if ($('#isChecked').is(':checked')) {
        $('#Shipping').show();
    } else {
        $('#Shipping').hide();
    }
}

Then call it from the event handler above:

$('#isChecked').change(toggleDiv);

And also when the page loads:

toggleDiv();

DinoMyte · Accepted Answer · 2016-03-21T17:36:50.190

0

You just need to bind a change event to the checkbox and check it's :checked selector to determine if the div needs to shown or hidden.

<script>
$().ready(function(){
  $('#isChecked').change(function()
   {
     $(this).is(":checked") ? $("#Shipping").show() : $("#Shipping").hide();
   }).change(); // optional
  });
</script>

edited Mar 21 '16 at 17:36

answered Mar 21 '16 at 17:30

DinoMyte

8,737
1
19
26

Thank you. This solved my problem – MSH Mar 21 '16 at 17:47
Sure. Glad to help :) – DinoMyte Mar 21 '16 at 17:55

score 0 · Answer 3 · answered Mar 21 '16 at 17:30

0

javascript:

$('#isChecked').change(function(){
    if($(this).is(":checked")) {
        $(this).removeClass("hide");
    } else {
        $(this).addClass("hide");
    }
});

css:

.hide{ display:none;}

HTML:

<div id='Shipping' class='hide'> </div>

answered Mar 21 '16 at 17:30

Mostafa Fateen

849
1
14
33

score 0 · Answer 4 · answered Mar 21 '16 at 17:32

0

$('#isChecked').change(function(){
    if($(this).is(":checked")) {
        $("#Shipping").hide()
    } else {
      $("#Shipping").show()
    }
});

answered Mar 21 '16 at 17:32

D Mishra

1,518
1
13
17

How to hide/unhide div using javascript?

4 Answers4