Show one element at a time

Question

schlo_50 0 Newbie Poster

15 Years Ago

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! :)

javascript

2 Contributors
1 Reply
124 Views
22 Hours Discussion Span
Latest Post 15 Years Ago Latest Post by essential

Reply to this topic

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.

essential 84 Posting Shark Featured Poster · Answer 1 · 2008-11-27T13:54:11+00:00

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...