Help displaying Div's with menu

[sp0oon]

Hello, I am using this script to display and hide divs in my pages. You use a dropdown menu to select the div, which will then hide the other div(s). The issue I am having is that on loading the page both div's appear. How can I make it so that only one div shows by default. Here's the code I am using.

<script type="text/javascript">
function el(tid) { //gets an element by its ID.
return document.getElementById(tid);
}

//a show-hide toggle function
function showme(s) {
var elmt = el(s);
var els = elmt.style;
if (els.display && els.display != "none") {
elmt._sty_disp_bk = els.display ? els.display : "none";
elmt.style.display = "none";
} else {
elmt.style.display = elmt._sty_disp_bk ¦¦ "block";
return 1;
}
}

function hide(s) {
el(s).style.display = "none";
}

function show(s) {
el(s).style.display = "block";
}
</script>
</head>

<select onchange="i=this.options[this.selectedIndex].text; if(i=='Version 1'){ show('block'); hide('block2'); };if(i=='Version 2'){ hide('block'); show('block2')}" style="width: 100px; font-size: xx-small;" name="coordinates">
<option value="">Select Version...
<option id="searchblock" value="">Version 1
<option id="searchblock2" value="">Version 2
</select>

<div id="block">
Another Tester
</div>

<div id="block2">
Just Testing
</div>

[edited by: coopster at 1:07 pm (utc) on Mar. 20, 2009]
[edit reason] no personal urls please TOS [webmasterworld.com] [/edit]

[daveVk]

Like this maybe [webmasterworld.com...]

welcome

[sp0oon]

Hello,

The script that you provided works great in firefox, how-ever the script does not work in internet explorer.

Here's how I have it set up...

<FORM
ACTION="../cgi-bin/redirect.pl"
METHOD=POST onSubmit="return dropdown(this.gourl)">
<SELECT NAME="gourl">
<OPTION VALUE="">Select A Version...

<OPTION VALUE="<a href="" onclick="show_div('div_1'); return false;"></a> Version 1

<OPTION VALUE="<a href="" onclick="show_div('div_2'); return false;"></a> Version 2

</SELECT>

</FORM>

<script language=javascript type='text/javascript'>
/* Initial id in global var */
var currId = 'div_1';
//
function show_div(div_id) {
if(currId) { document.getElementById(currId).style.display = 'none'; }
currId = div_id;
document.getElementById(currId).style.display = 'block';
}
function initPage() {
var n=2;
var divEl;
while ( ( divEl = document.getElementById( "div_" + n )) !== null ) { divEl.style.display = 'none'; n++;}
}
window.onload = initPage;
</script>

<div id="div_1">
<--- Content Goes Here --->
</div>

<div id="div_2">
<--- Content Goes Here --->
</div>

Can someone please help me make this work. Thank You

[daveVk]

<OPTION VALUE="<a href="" onclick="show_div('div_1'); return false;"></a> Version 1

Quotes need attention and option tag needs closing.
Also use of html and javascript within value tag is questionable

<SELECT NAME="gourl" onchange="show_div(this.options[this.selectedIndex].value)">
<OPTION VALUE="div_1" SELECTED>Version 1
<OPTION VALUE="div_2">Version 2
</SELECT>

Remove "Select a version", selection for the current div should always show.

[sp0oon]

Hello,

I added in the closing </option> and still no go. I am a nub at this so I'm not really sure what you mean by "quotes need attention"

The issue is the dropdown form that I am using.. Can you a better code or maybe edit those one for me.

Thank you in advance.

[daveVk]

the quotes as you have them will be interpreted as indicated by colors below, that is the value will be "<a href=" as the rest interpreted as who knows what.

<OPTION VALUE="<a href="" onclick="show_div('div_1'); return false;"></a> Version 1

The value is assumably intended to end after </a>, yet there is no quote there

The option tag should be of the form <OPTION ... > but the > is missing

So ignoring details inside the A tag for a moment the statement should read ?

<OPTION VALUE="<a ... ></a>"> Version 1

We can not used bare double quotes within the A tag, for reasons outlines above it needs to be written
<a href=\"\" onclick=\"show_div('div_1'); return false;\">

for more details on nested quotes google "nested quotes html"

The use of </option> is not strictly needed( except in xhtml )

Fixing these issues may get your code working in IE, but suggest replacing select block as per above post is better idea, as I have no idea how links within a value tag will be treated.

[sp0oon]

Hey Dave,

I changed some things around but now it does not work even in firefox. I used the fallowing code "<a href=\"\" onclick=\"show_div('div_1'); return false;\">" I also fixed all the other quotes that were out of place.

I'm using the code as the post above and you can see it here (http://dome.site90.com/?p=50) how-ever I want it to be a drop-down menu... It looks much cleaner and pofesional.

Do I have any other options? Like i said earlier, I have very little experience with code and all the codes that I use i get off the internet. I am not able to code anything from scratch..

Is there anyway to get my original code in the first post to display one div by default.. or to start on a option by default instead of showing which version to choose?

Please let me know as I need to get this working soon. Thank You

[daveVk]

Please replace this block

<ul class="nav">
<li><a href="" onclick="show_div('div_1'); return false;">Version 1</a></li>
<li><a href="" onclick="show_div('div_2'); return false;">Version 2</a> </li>
<li><a href="" onclick="show_div('div_3'); return false;">Version 3</a> </li>
<li><a href="" onclick="show_div('div_4'); return false;">Version 4</a> </li>
<li><a href="" onclick="show_div('div_5'); return false;">Version 5</a> </li>
<div class="clear"></div></ul>

with

<select NAME="gourl" style="width: 100px; font-size: xx-small;" name="coordinates" onchange="show_div(this.options[this.selectedIndex].value)">
<option value="div_1" SELECTED>Version 1
<option value="div_2">Version 2
<option value="div_3">Version 3
<option value="div_4">Version 4
<option value="div_5">Version 5
</select>

this will give you a dropdown styled like your original post.

[sp0oon]

Perfect. Thank you so much :)