PDA

View Full Version : listbox show/hide script help



tsclan
02-01-2005, 07: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, 02: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, 07: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, 09: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, 09: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, 08: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!