Hide and show div using Jquery

Question

I am trying to hide a div which is easily done with hide function in jquery. But it is not working.The div is

<div id="antivirusAlertDiv"> <ul class="shielding_elements"> <li> <%= Html.RadioButton("antivirusAlertType", 0, antivirusAlertType == AntivirusAlertType.AlertMe ? true : false)%> <label for="id_4"> Alert Me</label> </li> <li> <%= Html.RadioButton("antivirusAlertType", 0, antivirusAlertType == AntivirusAlertType.DonotAlert ? true : false)%> <label for="id_5"> Don’t Alert</label> </li> </ul> </div>

jquery code is:

function ShowAndHide(id, state) { var $mydiv = $('#antivirusAlertDiv'); if (state == false) { $mydiv.hide().html(''); // $('#uniform-antivirusAlertType').hide(); // $('#antivirusAlertDiv .shielding_elements li').hide(); // $("input[name='antivirusAlertType']").attr("disabled","disabled"); // $("#" + id).addClass("hide"); // $("#" + id).removeClass("show"); } else { $mydiv.show(); //$('#uniform-antivirusAlertType').show(); // $('#antivirusAlertDiv .shielding_elements li').show(); //$("input[name='antivirusAlertType']").removeAttr("disabled"); // $("#" + id).removeClass("hide"); // $("#" + id).addClass("show"); } }

Am I missing it, or are you not actually binding an event anywhere? — Khepri
– Khepri, Commented Jun 4, 2011 at 5:16
also, you're setting the html to nothing; when that's shown again there will be nothing there to show. (why are you removing the html??) — mpen
– mpen, Commented Jun 4, 2011 at 5:18

Matt Ball · Accepted Answer · 2011-06-04 05:19:11Z

Use .toggle(). However, you need to actually bind it to some event. For example, if the HTML looked like this:

<button id="clickme">Click to toggle</button> <div id="antivirusAlertDiv"> <!-- snip --> </div>

Then in a document ready handler,

$('#clickme').click(function () { $('#antivirusAlertDiv').toggle(); });

Demo: http://jsfiddle.net/mattball/rPYLK/

N.B. you can simplify the existing code as follows:

<div id="antivirusAlertDiv"> <ul class="shielding_elements"> <li> <label> <%= Html.RadioButton("antivirusAlertType", 0, antivirusAlertType == AntivirusAlertType.AlertMe)%> Alert Me </label> </li> <li> <label> <%= Html.RadioButton("antivirusAlertType", 0, antivirusAlertType == AntivirusAlertType.DonotAlert)%> Don’t Alert </label> </li> </ul> </div>

The conditional operator is redundant
Wrap the <label> around the corresponding input and the for attribute can be omitted

Collectives™ on Stack Overflow

Hide and show div using Jquery

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related