Show/Hide Help? 1

CampbellIT · Nov 15, 2010

I need some help with Javascript Show/Hide. I am no expert with Javascript, so I pieced the Javascript portion of the page together. I would like for the page to load hidden, then be able to show or hide the various div/tables as clicked. Right now, it loads showing and the divs hide, but can't be shown after that. Thank you for any input!

Here's my project:

http://www.cityofcampbell.com/AgendasMinutes/_testshowhide.htm

cLFlaVA · Nov 15, 2010

Hi.

Take a look at your JavaScript function:

Code:

function show_hide (obj) { 
    var el = document.getElementById(obj); 
    if ( el.style.display = 'block' ) { 
        el.style.display = 'none'; 
    } else { 
        el.style.display = 'none'; 
    } 
}

A couple of things to note:[ol][li]To test for equality, JavaScript uses the double equals sign (==). Note that you have a single equals sign in your test. This will set the value of el.style.display to 'block' and return true all the time.Change the single equals sign to a double equals sign.[/li][li]You are setting the display property of the style attribute to 'none' in both the positive and negative test result. Are you sure this should be the case? For the false case, shouldn't you be setting the attribute to 'block'?[/li][/ol]

Amended code:

Code:

function show_hide (obj) { 
    var el = document.getElementById(obj); 
    if ( el.style.display == 'block' ) { 
        el.style.display = 'none'; 
    } else { 
        el.style.display = 'block'; 
    } 
}

----

CampbellIT · Nov 16, 2010

Thank you for the input. I applied the recommended code changes. The show/hide feature now works. Yay! How can I get the page to load with the tables hidden?

cLFlaVA · Nov 16, 2010

There are several ways you can do this ranging from quick and dirty to elegant.

The two easiest ways are as follows:

1. Change the style attribute for each of the div objects to be hidden by default. This is probably preferred to the second option because you don't need to utilize JavaScript. To do this, simply alter each div element to be something like the following:

Code:

<div id="Council" [COLOR=red]style="display:none;"[/color]>

OR

2. Add function calls to your body element's onload event. This utilizes JavaScript to hide each of the elements you'd like to hide.

Code:

<body bgcolor="#ffffff" onLoad="MM_preloadImages('../images/index_r2_c2_f2.gif','../images/index_r2_c4_f2.gif','../images/index_r2_c7_f2.gif','../images/index_r2_c9_f2.gif','../images/index_r2_c11_f2.gif','../images/index_r3_c1_f2.gif','../images/index_r4_c1_f2.gif','../images/index_r5_c1_f2.gif','../images/index_r6_c1_f2.gif','../images/index_r7_c1_f2.gif','../images/index_r8_c1_f2.gif','../images/index_r9_c1_f2.gif','../images/index_r10_c1_f2.gif','../images/index_r11_c1_f2.gif','../images/index_r12_c1_f2.gif','../images/index_r13_c1_f2.gif','../images/index_r14_c1_f2.gif','../images/index_r15_c1_f2.gif','../images/index_r16_c1_f2.gif','../images/index_r17_c1_f2.gif','../images/index_r18_c1_f2.gif','../images/CityHome_on.gif','../images/CityClerkBoardsCommissions_on.gif','/images/RDAEconomicDevelopment_on.gif')[COLOR=red]; show_hide('Council);[/color]">

----

CampbellIT · Nov 16, 2010

That's what I'm talkin' 'bout! Maybe I'll add some radio buttons now instead of the link. Thank you so much! I'm learing script.

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Show/Hide Help? 1

CampbellIT

MIS

cLFlaVA

Programmer

CampbellIT

MIS

cLFlaVA

Programmer

CampbellIT

MIS

Similar threads

Part and Inventory Search

Sponsor