Show one div, hide others

Forum Moderators: open

Message Too Old, No Replies

Show one div, hide others

Is this possible?

max_naylor

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

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

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]