Need a Toggle Div Script, BUT...

**MizzBia** · 01-06-2009, 12:17 AM

Hi all
I need a script to toggle div's but the problem is I cannot reference any JavaScript on the page I'm working on which is making this simple task a nightmare.

Would anyone by any chance know how to toggle content (or show/hide) div's without using: <script type="text/javascript">

NOTE... I can use inline JavaScript, I just can't imbed any code in the page or reference an external JavaScript file.

Any help would be soooooo appreciated.
thanks for your time

**Nile** · 01-06-2009, 12:46 AM

Kinda messy, but give this a try:

Code:

<div id="toggle">Hi</div>
<button onclick="
if(document.getElementById('toggle').style.display == 'none'){
   document.getElementById('toggle').style.display = 'block';
} else {
   document.getElementById('toggle').style.display = 'none';
}
">Toggle</button>

**saynogo9999** · 01-06-2009, 03:57 PM

Nile, i couldnt get your script working correctly. Everytime i clicked the button, the page did refresh. I have one here that are compatiple with more browsers if needed.

Code:

<script language="javascript">
var state = 'hidden';

function showhide(layer_ref) {

if (state == 'visible') {
state = 'hidden';
}
else {
state = 'visible';
}
if (document.all) { //IS IE 4 or 5 (or 6 beta)
eval( "document.all." + layer_ref + ".style.visibility = state");
}
if (document.layers) { //IS NETSCAPE 4 or below
document.layers[layer_ref].visibility = state;
}
if (document.getElementById && !document.all) {
maxwell_smart = document.getElementById(layer_ref);
maxwell_smart.style.visibility = state;
}
}
</script>

Code:

<div id="toggle" style="visibility:hidden;">Content</div>

or

<div id="toggle" style="visibility:visible;">Content</div>

<a href="javascript://" onclick="showhide('toggle');">Toggle</a>

**MizzBia** · 01-06-2009, 06:36 PM

Originally Posted by Nile

Kinda messy, but give this a try:

Code:

<div id="toggle">Hi</div>
<button onclick="
if(document.getElementById('toggle').style.display == 'none'){
   document.getElementById('toggle').style.display = 'block';
} else {
   document.getElementById('toggle').style.display = 'none';
}
">Toggle</button>

Hi Nile,
thank you so much for your help!! The code worked wonderfully

I truly appreciate your help on this!

**Nile** · 01-06-2009, 10:33 PM

I'm glad to help you MizzBia!

saynogo9999 please make sure you have an up to date browser.

**swcomm** · 11-21-2009, 05:31 AM

with one change that I am completely stumped by. How do I set the begin state to off? I'd like the content to appear after the user clicks the button, rather than the content disappearing when they click the button. Thanks in advance for any help.