I have a large page having a lot of divs and all these divs are enclosed in a single div. And I have number links on the top of the page equal to the total enclosed divs I have. Now what I want to do is, on click on a number, I want to show only div corresponding to that number and hide all other.

links--> 1 2 3 4 5 6 7 .....
<div id="all">
  <div id="mail1">..........</div>
  <div id="mail2">..........</div>
  <div id="mail3">..........</div>
  <div id="mail4">..........</div>
  <div id="mail5">..........</div>
  <div id="mail6">..........</div>
  .....and so on
</div>

I have to do it inside an HTML and that HTML will be stored and may be viewed offline as well, so cannot use jQuery here. Have to do it using JavaScript itself.

Could anybody help me with the JavaScript code here?.

I have a large page having a lot of divs and all these divs are enclosed in a single div. And I have number links on the top of the page equal to the total enclosed divs I have. Now what I want to do is, on click on a number, I want to show only div corresponding to that number and hide all other.

links--> 1 2 3 4 5 6 7 .....
<div id="all">
  <div id="mail1">..........</div>
  <div id="mail2">..........</div>
  <div id="mail3">..........</div>
  <div id="mail4">..........</div>
  <div id="mail5">..........</div>
  <div id="mail6">..........</div>
  .....and so on
</div>

I have to do it inside an HTML and that HTML will be stored and may be viewed offline as well, so cannot use jQuery here. Have to do it using JavaScript itself.

Could anybody help me with the JavaScript code here?.

• javascript

• Why would offline viewing prohibit jQuery? As long as you are not hosting it, – mplungjan Commented Jul 29, 2012 at 15:03
• 1 You seem to have stated what you have to do; what would you like us to help you with? What part are you having trouble with; what's your question for us? – David Thomas Commented Jul 29, 2012 at 15:04
• @mplungjan See to use jquery, i will have to host the jquery.js file somewhere, right.....what i want is a single html document having all javascript code in it. thats y i guess jquery cannot be used...am i right? – Gaurav Sachdeva Commented Jul 29, 2012 at 15:08
• Onclick of the link, hide saved reference if not the same, and show new reference. Standard Dom manipulation. For something more elegant try onlinetools/tools/domtabdata – mplungjan Commented Jul 29, 2012 at 15:08
• 1 No. You can include jQuery in the page too. JQuery is also just JavaScript – mplungjan Commented Jul 29, 2012 at 15:09

3 Answers 3

<script type="text/javascript">
    var divIds = ["mail1", "mail2", ..., "mailn"];
    function showDiv(showId) {
         for(var i = divIds.length; i--; ) {
              if(divIds[i] === showId)
                  document.getElementById(showId).style.display = "block";
              else
                  document.getElementById(divIds[i]).style.display = "none";
         }
    }
</script>

Then your links at the top will look like this:

<a href="#" title="Show Mail 1" onclick="showId('mail1');">1</a>

Haven't tested it, but that's the idea. Downsides are you have to maintain the div in 3 places in code

1. In the var divIds array.
2. In the html tag itself.
3. In the links across the top.

You could write some javascript to generate all 3, taking away the maitenance part of it entirely.

As for using jQuery in an offline doc, the best route would probably be to include the text of the jquery.min.js file in the doc itself inside of <script></script> tags. That way you don't have to worry about paths and what-not.

You may do something like that (don't judge me on js coding style, i'm not a js ninja):

window.onload = function() {
    var outer = document.getElementById("all");

    for (var i=0; i < outer.childNodes.length; i++) {
        outer.childNodes[i].addEventListener("click", doSomething);
    }

    function doSomething() {
        // here you can run loop for changing display style for you divs
        console.log(this.id);
    }
}

I made an unobtrusive example without knowing the div ids:

http://jsfiddle/8pQzx/2/

Its more code but this is what you get if you dont want to use a js lib. ;)