unable to hide/visible div panel using javascript

Question

I have 3 individual div's(in aspx page and making all 3 div's visible="false").

Based on condition I have to show 1 div at a time and remaning two div's to hide

I am doing in javascript as making 1 div as style.visibility = "block"; and other 2 div's to Style.Add("display", "none");

while running it is throwing error msg as:

unable to get the value of the property 'style': object is null or undefined

Below is the code, in aspx:

 <div runat="server" id="div1" visible="false">
 ..
 </div>

 <div runat="server" id="div2" visible="false">
 ..
 </div>
 <div runat="server" id="div3" visible="false">
 ..
 </div>

 $(document).ready(function () {
    var val =  "xx1" (or "xx2" or"xx3")
  switch (val) {
     case "xx1":
     document.getElementById('ctl00_ContentPlaceHolder2_div1').Style.Add("display", "none");
       // document.getElementById('ctl00_ContentPlaceHolder2_div1').style.visibility = "hidden";
    document.getElementById('ctl00_ContentPlaceHolder2_div2').style.visibility = "block";
    //document.getElementById('ctl00_ContentPlaceHolder2_div2').style.visibility = "visible";
    document.getElementById('ctl00_ContentPlaceHolder2_div3').Style.Add("display", "none");
    case "xx2":
     document.getElementById('ctl00_ContentPlaceHolder2_div1').Style.Add("display", "block");
    document.getElementById('ctl00_ContentPlaceHolder2_div2').style.visibility = "none";
    document.getElementById('ctl00_ContentPlaceHolder2_div3').Style.Add("display", "none");
    case "xx3":
     document.getElementById('ctl00_ContentPlaceHolder2_div1').Style.Add("display", "none");
    document.getElementById('ctl00_ContentPlaceHolder2_div2').style.visibility = "none";
    document.getElementById('ctl00_ContentPlaceHolder2_div3').Style.Add("display", "block");

});

Looks like you are using JQuery, why not write the rest in JQuery? — VIDesignz
– VIDesignz, Commented Feb 6, 2014 at 22:50
If i am making visible="true"(in aspx page making all 3 div's) while loading the page it showing all the 3 div's and then 2 div's are hiding and they are taking space for each even though they are hidden. — user2522503
– user2522503, Commented Feb 6, 2014 at 22:50
Why are you adding the styles? just go either .style.display = 'none'; or .style.display = 'block'; — VIDesignz
– VIDesignz, Commented Feb 6, 2014 at 22:56
Also, you have .Style and .style ... pretty sure it should be .style — VIDesignz
– VIDesignz, Commented Feb 6, 2014 at 22:58
In your example ctl00_ContentPlaceHolder2_div1 doesn't exist in your html? Why is that? — VIDesignz
– VIDesignz, Commented Feb 6, 2014 at 23:00

Comfortably Numb · Accepted Answer · 2014-02-06 23:01:12Z

1

Don't do visible="false". When you do that client-side control is not rendered at all - it simple doesn't exist.

Instead if you want to hide it, but still make it available to client code do

<div runat="server" id="div1" style="display:none">
 ..
</div>

or

<div runat="server" id="div1" style="visibility:hidden">
 ..
</div>

depending on how you want to hide it.

After that your client-side code will be able to locate and manipulate it.

Matter of fact - if you don't need to access these DIVs on the server, you can remove runat="server" attribute altogether. Bonus: Unaltered DIV id (you can use 'div1' instead of 'ctl00_ContentPlaceHolder2_div1')

answered Feb 6, 2014 at 23:01

Comfortably Numb

39.9k17 gold badges82 silver badges147 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

user2522503 Over a year ago

thxs for ur reply. modified the code to style="visibility:hidden">. But it is taking space for the hidden div's. how to aviod this?

Comfortably Numb Over a year ago

This is why I offered alternative "depending on how you want to hide it.". Instead of style="visibility:hidden" use style="display:none"

user2522503 Over a year ago

after adding this style="display:none" It is giving error for as "unable to get the value of the property 'style': object is null or undefined"

Comfortably Numb Over a year ago

It should make no difference which style is applied; the DIV should still be availabe as long as you dont reenable visible="false"

Ricky Stam · Accepted Answer · 2014-02-06 23:01:12Z

0

The correct syntax for visibility is:

document.getElementById("myP").style.visibility="hidden";

But you can use jQuery :

    $("#YourSelector").hide();

    $("#YourSelector").show();

answered Feb 6, 2014 at 23:01

Ricky Stam

2,12621 silver badges25 bronze badges

Collectives™ on Stack Overflow

unable to hide/visible div panel using javascript

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related