...

View Full Version : listbox show/hide script help



tsclan
02-01-2005, 06:17 PM
I have this script here that shows some links and when a link is clicked on the corosponding text will be displayed


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html dir="ltr" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Showme hideme</title>
<script type="text/javascript">
function init()
{
if(document.getElementById && document.createTextNode)
{
var mn=document.getElementById('mainnav');
var as=mn.getElementsByTagName('a');
for (var i=0;i<as.length;i++)
{
as[i].onclick=function(){show(this);return false}
as[i].onkeypress=function(){show(this);return false}
}
hidem();
}
}
function show(l)
{
hidem();
var id=l.href.match(/#(\w.+)/)[1];
document.getElementById(id).style.display='block';
}
function hidem()
{
for (var i=0;i<document.getElementsByTagName('div').length;i++)
{
document.getElementsByTagName('div')[i].style.display='none';
}
}
window.onload=init;
</script>
</head>
<body>
<ul id="mainnav">
<li><a href="#why">Why</a></li>
<li><a href="#now">Now</a></li>
<li><a href="#brown">Brown</a></li>
<li><a href="#cow">Cow</a></li>
</ul>
<div id="why">...why data...</div>
<div id="now">...now data...</div>
<div id="brown">...brown data...</div>
<div id="cow">...cow data...</div>
</body>
</html>


But instead of clickin on the link to show the div can I use a listbox instead.
Is anyone able to show me how to do that

Thanks in advance

hemebond
02-02-2005, 01:04 AM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>51417</title>
<script type="text/javascript">
function select_show(l)
{
hidem();

var id = l.value;

if(id == '')
{
return;
}

document.getElementById(id).style.display = 'block';
}

function hidem()
{
for (var i=0;i<document.getElementsByTagName('div').length;i++)
{
document.getElementsByTagName('div')[i].style.display='none';
}
}
window.onload = hidem;
</script>
</head>
<body>
<select id="selectnav" onchange="select_show(this)">
<option value=""></option>
<option value="why">Why</option>
<option value="now">Now</option>
<option value="brown">Brown</option>
<option value="cow">Cow</option>
</select>

<div id="why">...why data...</div>
<div id="now">...now data...</div>
<div id="brown">...brown data...</div>
<div id="cow">...cow data...</div>
</body>
</html>The method you're using now is much better.

tsclan
02-02-2005, 06:54 AM
Thank you very much exactly what I needed.
Although it removes all the <div> tags on the page and the page that I am using this on have them all over
usally when I have seen scripts that hide things it makes a genral area where to hide the things, like hide everything inside the <div id="toggle"> tag then show the appropriate area inside the <div id="toggle"> once the corosponding listbox has been selected

I am not very good at javascript and was wondering how I would make it so that it would just show/hide the stuff inside <div id="toggle"> rather than all the other <div> tags on the page

hemebond
02-02-2005, 08:12 PM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>51417</title>
<script type="text/javascript">
function select_show(l)
{
hidem();

var id = l.value;

if(id == '')
{
return;
}

document.getElementById(id).style.display = 'block';
}

function hidem()
{
var divs = document.getElementById("container").getElementsByTagName("div");
for (var i=0;i<divs.length;i++)
{
divs[i].style.display='none';
}
}
window.onload = hidem;
</script>
</head>
<body>
<select id="selectnav" onchange="select_show(this)">
<option value=""></option>
<option value="why">Why</option>
<option value="now">Now</option>
<option value="brown">Brown</option>
<option value="cow">Cow</option>
</select>

<div id="container">
<div id="why">...why data...</div>
<div id="now">...now data...</div>
<div id="brown">...brown data...</div>
<div id="cow">...cow data...</div>
</div>
</body>
</html>

tsclan
02-09-2005, 08:38 AM
I have this code (thanks to "HomeBound") that will hide/show the things inside the container div tag using a drop down menu as the selector just like the one above


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>51417</title>
<script type="text/javascript">
function select_show(l)
{
hidem();

var id = l.value;

if(id == '')
{
return;
}

document.getElementById(id).style.display = 'block';
}

function hidem()
{
var divs = document.getElementById("container").getElementsByTagName("div");
for (var i=0;i<divs.length;i++)
{
divs[i].style.display='none';
}
}
window.onload = hidem;
</script>
</head>
<body>
<select id="selectnav" onchange="select_show(this)">
<option value=""></option>
<option value="why">Why</option>
<option value="now">Now</option>
<option value="brown">Brown</option>
<option value="cow">Cow</option>
</select>

<div id="container">
<div id="why">...why data...</div>
<div id="now">...now data...</div>
<div id="brown">...brown data...</div>
<div id="cow">...cow data...</div>
</div>
</body>
</html>

Although is it possible to make it so that it also hide/shows data in another <div id="container"> tag like this
For Example


<div id="container">
<div id="why">...why data...</div>
<div id="now">...now data...</div>
<div id="brown">...brown data...</div>
<div id="cow">...cow data...</div>
</div>
Some More Html here like tables and text and images then show the rest of the hidden data here as well.
<div id="container">
<div id="why">...why data...</div>
<div id="now">...now data...</div>
<div id="brown">...brown data...</div>
<div id="cow">...cow data...</div>
</div>

Any Ideas or examples are welcome
Thanks again to homebound for all your help.

smokyweb
12-29-2006, 07:40 PM
I am trying to use this same script, but I would like to be able to hide the data by clicking the link as well as show it. Can anyone assist me with this?
Thanks!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum