homepage Welcome to WebmasterWorld Guest from 54.197.111.87
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

    
Show one div, hide others
Is this possible?
max_naylor




msg:3775683
 12:18 pm on Oct 29, 2008 (gmt 0)

Iíve been looking around the Internet for some code which will help me with a problem which seems to have no solution. Is it possible to have a bank of hyperlinks, each of which would show one div and hide others. For example, I have a row of links that says:

Denmark, Norway, Sweden

When I click on 'Denmark', I would like the div with the id 'denmark' to appear, and the divs 'norway' and 'sweden' to disappear. This has to be possible, and finding a solution is driving me nuts! Any help or pointers anyone could give would be useful.

 

Fotiman




msg:3775851
 3:15 pm on Oct 29, 2008 (gmt 0)

At it's most basic form, you want a method that takes 2 parameters (the visible item, and the list of all items). There's a lot of DOM and Event manipulation that's going to take place, so personally I would recommend using Event Listeners and attaching them using a JavaScript framework like YUI or jQuery. My example below, though, will instead use Event Handlers (which might overwrite other handlers you have, or might get overridden by other event handlers), only for the purpose of showing the basics.


function groupSelector(el, elList) {
var i, numItems = elList.length;
// Hide all items in the list
for (i = 0; i < numItems; i++) {
elList[i].style.display = 'none';
}
// Show the one item
if (el != null) {
el.style.display = 'block';
}
}

In that example, I'm explicitly setting the display property of the style attribute. A better solution might be to add/remove a class. Using the YUI it would be something like
YAHOO.util.Dom.replaceClass(el,'shown','hidden');

Now you'd need an array of all the elements you want hidden:


var countries = [
document.getElementById('Denmark'),
document.getElementById('Sweden'),
document.getElementById('Norway')
];

And you'll need to attach your event handler to your links. Here is a working example that ties it all together:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" >
<title>Untitled</title>
</head>
<body>
<div>
<ul id="countryLinks">
<li><a href="#Denmark">Denmark</a></li>
<li><a href="#Sweden">Sweden</a></li>
<li><a href="#Norway">Norway</a></li>
</ul>
<div id="Denmark">Welcome to Denmark!</div>
<div id="Sweden">I am Inga from Sweden!</div>
<div id="Norway">Norway! Way!</div>
</div>
<script type="text/javascript">
window.onload = function () {
var countries = [
document.getElementById('Denmark'),
document.getElementById('Sweden'),
document.getElementById('Norway')
];
var i, countryLinks = document.getElementById('countryLinks');
function groupSelector(el, elList) {
var i, numItems = elList.length;
// Hide all items in the list
for (i = 0; i < numItems; i++) {
elList[i].style.display = 'none';
}
// Show the one item
if (el != null) {
el.style.display = 'block';
}
}
// Attach handler to links
var cLinks = countryLinks.getElementsByTagName('a');
for (i = 0; i < cLinks.length; i++) {
cLinks[i].onclick = function (el, elList) {
return function () {
groupSelector(el, elList);
return false;
};
}(document.getElementById(cLinks[i].href.substr(cLinks[i].href.indexOf('#')+1)), countries);
}
};
</script>
</body>
</html>

Note, this example is not doing a whole lot of error checking, so use with caution.

This bit of code:

(document.getElementById(cLinks[i].href.substr(cLinks[i].href.indexOf('#')+1)), countries)

is getting the sub string to the right of the '#' in the href of each link, and using that value as the parameter for getElementById. The resulting element is passed (along with the countries array) to the anonymous function so that it executes immediately. The return value of this function is another function which then gets assigned to the onclick handler for each link. This is done to create a 'closure', so that the inner function's scope still knows about the el and elList variables.

Hope this helps.

Fotiman




msg:3775856
 3:19 pm on Oct 29, 2008 (gmt 0)

I meant to mention, this is all wrapped in the window.onload event handler which is an anonymous function, and does not muck up the global namespace with a bunch of variables. If you want to show/hide a particular element when the page loads, you could add this (perhaps right before you attach handlers to the links):


groupSelector(countries[0], countries);

[edited by: Fotiman at 3:20 pm (utc) on Oct. 29, 2008]

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved