JavaScript Toggle Radio Buttons

[MizzBia]

Hello,
I found some code here to toggle content using radio buttons:
[webmasterworld.com...] (see Lance's post or the code below).

This code works great but I would like to know if anyone knows how I could specify a default div to be open on page load. It should still toggle like the rest but also be open already when the page loads so that the content area is not empty. Any ideas? The code I used is below:

======================================================
<style type="text/css">
#Div1, #Div2, #Div3
{
DISPLAY: none;
}
</style>

<script type="text/javascript">
function Toggle(theDiv) {
document.getElementById("Div1").style.display = "none";
document.getElementById("Div2").style.display = "none";
document.getElementById("Div3").style.display = "none";
document.getElementById(theDiv).style.display = "block";
}
</script>

<input type="radio" name="ToggleDivs" onclick="Toggle('Div1');" />Turn on Div 1<br />
<input type="radio" name="ToggleDivs" onclick="Toggle('Div2');" />Turn on Div 2<br />
<input type="radio" name="ToggleDivs" onclick="Toggle('Div3');" />Turn on Div 3<br />

<br /><br />

<div id="Div1">I am the content of Div 1</div>

<div id="Div2">I am the content of Div 2</div>

<div id="Div3">I am the content of Div 3</div>
======================================================

[edited by: MizzBia at 3:28 am (utc) on Dec. 16, 2008]

[MizzBia]

anyone? :(

[Trace]

Easiest way, I think, would be to remove the one you want to show up by default from being hidden in the CSS.

Example, #Div1 is now there by default if you remove it from here;

<style type="text/css">
#Div2, #Div3
{
DISPLAY: none;
}
</style>

[Fotiman]

For people with JavaScript disabled, they will never see any of your content. A better approach is to show all of the content by default, and then use JavaScript to trigger the CSS that will hide it. One approach would be to use JavaScript to apply a class to your body element. Here's an example using the Yahoo UI Library (YUI) for it's DOM and Event Utilities:

<style type="text/css">
/* #Div1 is displayed by default */
.hasJs #Div2,
.hasJs #Div3 {
  display: none;
}
</style>
<script type="text/javascript" src="http://yui.yahooapis.com/combo?2.6.0/build/yahoo-dom-event/yahoo-dom-event.js"></script> 
<script type="text/javascrpt">
YAHOO.util.Event.onDOMReady(function () {
  YAHOO.util.Dom.addClass(document.getElementsByTagName('body')[0], 'hasJs');
});
</script>
<script type="text/javascript">
function Toggle(theDiv) {
  var g = document.getElementById;
  g("Div1").style.display = "none";
  g("Div2").style.display = "none";
  g("Div3").style.display = "none";
  g(theDiv).style.display = "block";
}
</script>
<input type="radio" name="ToggleDivs" onclick="Toggle('Div1');" />Turn on Div 1<br />
<input type="radio" name="ToggleDivs" onclick="Toggle('Div2');" />Turn on Div 2<br />
<input type="radio" name="ToggleDivs" onclick="Toggle('Div3');" />Turn on Div 3<br />
<br /><br />
<div id="Div1">I am the content of Div 1</div>
<div id="Div2">I am the content of Div 2</div>
<div id="Div3">I am the content of Div 3</div>

Note, I would probably replace some of your code with YUI methods if I was doing this myself, but I'm crunched for time. :) But that example appends the class 'hasJs' to the body, and then you can create style rules that are dependent on JavaScript being enabled by including .hasJs before your selector.

Hope that helps.

[MizzBia]

Hi guys,
thanks so much for getting back to me.
I thought of removing one to show the div but didn't want to use that option because it would cause the first div to always stay open and I need each of them to toggle. What I ended up doing was using body onLoad to open the first div when the page loads. Seems to be working good.

Fotiman, thanks for the tip about users with JS turned off. I hadn't really prepared for that. The thing is most of the site is using JavaScript as its a travel site with live reservations and real-time searching. I am not able to change all the other areas on the site so I figured I might as well continue with JS.

Besides, I'm thinking the majority of people who turn off JS would probably not be the type of folks that would buy a trip online.

Also, I checked browser statistics which show less than 5% of users turn off JS and that may even include bots.

Just in case though, I was thinking of adding a <noscript> tag in there. Wouldn't that help with ensuring the non-JS users see something?

[astupidname]

didn't want to use that option because it would cause the first div to always stay open and I need each of them to toggle

That's not true, the first div will be changed to 'display:"none";' when any of the other radio buttons is clicked if you use Trace's suggestion. DID YOU TRY IT?
As far as noscript tags you could do one of a couple things. Either create entire duplicates of div2 and div3 within noscript tags (undesirable, if much content in them, and basically wrong way to go about it. Next option would be the norm..), or just place a standard noscript tag near the top of your page (you should be doing something like this to begin with, as a best practice) (on all pages that use javascript) just below your header and above the main content and be sure to style it red or obvious color:
</head>
<body>
<!-- header stuff here -->
<!-- beginning of main contents -->
<div id="mainstuff">
<noscript><p style="font-size:2em; background-color:white; color:red;">It appears you do not have javascript enabled in your browser. Certain elements of this page may not work properly without javascript, so it is recommended to enable javascript in your browser to have the best experience. You can trust us, really, I promise!</p></noscript>
<!-- main contents -->

[astupidname]

...just don't break that promise with stupid popup windows or popup tooltip ads or floating ads or music or.....

[MizzBia]

Thanks for your tips astupidname! I appreciate it.
No I had not tried it... actually I did something similar to his suggestion but it did not work. I didn't look at his code well enough and just assumed it was the same thing I tried earlier.

I think I'll stick will onload tho... it was just one tiny line of code that I had to add.

I will use your second <noscript> idea and no, I won't be adding any popups, tooltips or music :)

Thanks again