Hide using a div tab

G

Guest

I have an aspx page that contains a drop down and 3 divs and lots of other
stuff. I'd like to hide the divs depending on which option from the drop down
is selected. It works fine until I do a postback then all 3 divs are visible.

When the page initially loads I see just the div corresponding to the
default value in the ddl. Prior to a postback the display works as intended
but once a postback occurs all 3 divs are visible until I make another
selection on the ddl.

Code is below. As you will see I try to stay away from javascript but would
really like to avoid a postback here.

Thanks

Code behind
Protected WithEvents bodytag As HtmlGenericControl
PageLoad
ddlSearch.Attributes.Add("onchange", "return toggleDiv()")
bodytag.Attributes.Add("onload", "return toggleDiv()")


aspx page
<script language="JavaScript"> function toggleDiv() {
div1 = document.getElementById('divAssessment');
div2 = document.getElementById('divNC');
div3 = document.getElementById('divDesignComments');
DDL = document.getElementById('ddlSearch');
if (DDL.selectedIndex == 0) {
div1.style.visibility = 'visible';
div1.style.display = 'block';
div2.style.visibility = 'hidden';
div2.style.display = 'none';
div3.style.visibility = 'hidden';
div3.style.display = 'none';
}

if (DDL.selectedIndex == 1) {
div1.style.visibility = 'hidden';
div1.style.display = 'none';
div2.style.visibility = 'visible';
div2.style.display = 'block';
div3.style.visibility = 'hidden';
div3.style.display = 'none';
}

if (DDL.selectedIndex == 2)
{
div1.style.visibility = 'hidden';
div1.style.display = 'none';
div2.style.visibility = 'hidden';
div2.style.display = 'none';
div3.style.visibility = 'visible';
div3.style.display = 'block';
}
}

</script>

<body runat="server" id="bodytag">

<div >...
 
G

Guest

What you need here is a call to the javascript function toggleDiv, after the
page is loaded in broswer

try
Page.RegisterStartupScript("<script>toggleDiv();</script>");
 
G

Guest

Awsome, that does it.

Thanks... but why does the initial page load work but not the postback?
 
G

Guest

I can only make a guess without seeing code

is there code hiding/showing divs at server side ? if so is it in "if
(!Page.IsPostBack)" ?
 
G

Guest

yes
ddlSearch.Attributes.Add("onchange", "return toggleDiv()")
bodytag.Attributes.Add("onload", "return toggleDiv()")

i have these two lines in between that if stmt but I tried both in and
outside that if stmt and saw no difference.

Thanks
 
G

Guest

Well,my guess was that your onload=togglediv() is not working the first time
or in postbacks.. I meant you may have some other server side code to hide
div, like below ..

if(!Page.PostBack)
{
if(somevalue="0")
{
div1.attributes.add("style","visibility:none") ;
div1.attributes.add("style","visibility:hidden") ;

}
}

Any case the bottmline is, if one need to access the HTML elements using
javascript when the page loads, use Page.RegisterStartupScript ... :)
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Javascript not hiding nested elements simultaneously 2
How can I hide a div using an event listener on multiple checkboxes? 6
swapping divs dynamically -- my code too funky....;) 4
Critique this div resizing script 4
Hide/Show Multiple Div Centered (in firefox and ie) 2
Hide/Show Issue, Please Help 1
Help With a Script 5
Hide gridview on page open 0

Members online

No members online now.
Total: 71 (members: 3, guests: 68)
Robots: 290

Forum statistics

Threads
473,968
Messages
2,570,152
Members
46,697
Latest member
AugustNabo

Latest Threads

Top