Member Avatar for schlo_50

Hello all,

My first thread here and im in need of some Javascript help. I have 3 categories: Starters, Mains and Sides, which when clicked displays any content inside my element. This is great but I would like to go that bit further and have only one element on show at any one time.

I thought it would be best to put the elements into an array but I have no idea where to go from here. Unfortunately Im not very literate with javascript which is a shame as it has alot of scope for some cool functionality.

My code so far:

<script type="text/javascript">
	function showStuff(id) {
	
	var switch_elements = new Array('starters', 'mains', 'sides');	
	
	if(document.getElementById(id).style.display == "none"){ 
		document.getElementById(id).style.display = "block"; 
	}else{ 
		document.getElementById(id).style.display = "none"; 
	}
	}
	function hideStuff(id) {
		document.getElementById(id).style.display = 'none';
	}
</script>
<p><a href="#" onclick="showStuff('starters'); return false;">Starters</a><br>
<span id="starters" style="display: none;">Starters</span></p>
          
 <p><a href="#" onclick="showStuff('mains'); return false;">Main Dishes</a><br>
<span id="mains" style="display: none;">Main Dishes</span></p>

 <p><a href="#" onclick="showStuff('sides'); return false;">Side Dishes</a><br>
<span id="sides" style="display: none;">Side Dishes</span></p>

Thanks in advance for any help with this! :)

  • 2 Contributors
  • 1 Reply
  • 127 Views
  • 22 Hours Discussion Span
  • Latest Post Latest Post by essential
Member Avatar for essential

If you will consider my advice, then the easiest way, is to show all information with just one container instead of making those 3 elements disappear. The following demo will show you how things will work.
This Markup is a Valid xHTML 1.0 Strict and also validates using CSS Level 2.1

<?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head> 
<title>Show one element at a time</title>
<style type="text/css" media="screen, projection">
/* <![CDATA[ */
body {
     background-color: #fff;
     color: #696969;
     font-size: 90%;
     font-family: Georgia, 'Times New Roman', Times, Serif;
}
a:link, a:visited {
     color: #000066;
     text-decoration: none;
     font-weight: 700;
     font-size: 18px;
     text-transform: capitalize;
}
a:active, a:hover {
     color: #EE0000;
     text-decoration: none;
     font-weight: 700;
     font-size: 18px;
     text-transform: capitalize;
} 
#wrap {
     width: 550px;
     height: 220px;
     margin: 0 auto;
     padding: 0;
}
div #menu {
     width: 130px;
     height: 166px;
     float: left;
     border: 2px solid #000;
     border-right: none;
     margin: 0;    
     background-color: #eee;
}
div #menu ul {
     width: 130px;
     line-height: 30px;
     list-style-type: none;
     float: left;
     margin: 10px 0 0 20px;
     padding: 0;
}
div #menu li {
     width: auto;
     float: left;
     line-height: 30px;
     display: block;
     margin: 0;
     padding: 0;
     clear: left;
}
div #info {
     width: 400px;
     height: 150px;
     text-align: center;
     background-color: #000;
     position: relative;
     float: left;
     border-left: 1px dashed #eee;
     color: #fff;
     font: 700 20px Verdana;
     margin: 0;
     padding: 10px;
}
/* ]]> */
</style>
<script type="text/javascript">
/* <![CDATA[ */
var items = ['Info for food item #1', 'Info for food item #2', 'info for food item #3'];
var links = document.getElementsByTagName('a');
function showstuff(e) {
e = e ? e : window.event;
t = e.target ? e.target : e.srcElements;

for (var i = 0; i < items.length; i++) {
if ((links) || (t.tagName == 'a' || 'A')) { links[i].title = items[i]; } } var ids = (document.all) ? document.all.info : document.getElementById('info');
ids.innerText = t.title; }

function addEvents() {
for (var x = 0; x <= links.length; x++) {
if (document.addEventListener)
links[x].addEventListener('click',showstuff,false);
else if (document.attachEvent)
links[x].attachEvent('onclick',showstuff);
else if (document.getElementById) document.onclick = showstuff; }
}
if (window.addEventListener)
window.addEventListener('load',addEvents,false) 
else if (window.attachEvent)
window.attachEvent('onload',addEvents);
else window.onload = addEvents;
/* ]]> */
</script> 
<meta http-equiv="content-type" content="text/html;charset=utf-8" /> 
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" /> 
</head> 
<body>
<div id="wrap">   
<div id="menu">
<ul> 
     <li><a href="javascript:void(0);">Starters</a></li>
     <li><a href="javascript:void(0);">Main Dishes</a></li>
     <li><a href="javascript:void(0);">Side Dishes</a></li>
</ul> 
</div>
<div id="info"></div>
</div>
</body> 
</html>

Hope it helps you up. Good day...

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.