Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    Regular Coder
    Join Date
    Aug 2003
    Location
    scotland, edinburgh
    Posts
    176
    Thanks
    5
    Thanked 1 Time in 1 Post

    listbox show/hide script help

    I have this script here that shows some links and when a link is clicked on the corosponding text will be displayed
    Code:
    <!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

  • #2
    Senior Coder
    Join Date
    Jul 2004
    Location
    New Zealand
    Posts
    1,315
    Thanks
    0
    Thanked 2 Times in 2 Posts
    Code:
    <!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.

  • #3
    Regular Coder
    Join Date
    Aug 2003
    Location
    scotland, edinburgh
    Posts
    176
    Thanks
    5
    Thanked 1 Time in 1 Post
    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

  • #4
    Senior Coder
    Join Date
    Jul 2004
    Location
    New Zealand
    Posts
    1,315
    Thanks
    0
    Thanked 2 Times in 2 Posts
    Code:
    <!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>

  • #5
    Regular Coder
    Join Date
    Aug 2003
    Location
    scotland, edinburgh
    Posts
    176
    Thanks
    5
    Thanked 1 Time in 1 Post
    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
    Code:
    <!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
    Code:
    		<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.

  • #6
    New to the CF scene
    Join Date
    Feb 2003
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question

    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!
    Thanks in Advance!

    Smokyweb :)


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •