Hide/Show multiple divs with same ID

Forum Moderators: open

Message Too Old, No Replies

Hide/Show multiple divs with same ID

I've already tried "getElementById" method, does not work

cangoalie

3:34 pm on Mar 14, 2008 (gmt 0)

Hi
I need to hide/show multiple divs with the clicking of a link. Basically, I want to have one that allows the user to view all divs, then four that select only one of my four "types" of divs (Meetings, Tables, Events, Other). The problem with this that I cannot solve is that on the page I am building I will have more than one div of each type - for example, maybe three Meetings, two Tables, four Events and one Other. This prohibits me from using a JavaScript method using getElementById, as ids have to be individual. I have googled the hell out of this question but don't have any answers. Any help you can offer would be greatly appreciated.

Dabrowski

3:42 pm on Mar 14, 2008 (gmt 0)

All ID's on the page must be unique. If you want to do more than one at once then use classes.

cangoalie

3:55 pm on Mar 14, 2008 (gmt 0)

Yes, I realize that I need to use classes or a non-unique attribute. But my question is HOW to accomplish this.

mehh

5:48 pm on Mar 14, 2008 (gmt 0)

function getElementByClass(cName,tag,p){
 if(!cName){
  return false;
  }
 tag = tag іі "*" ;
 p = p іі document;
 var i;
 var cRegEx=new RegExp("(^і\\s)"+cName+"(\\sі$)");
 var ra=[];
 var a=p.getElementsByTagName(tag);
 for(i=0;i<a.length;i++){
  if(cRegEx.test(a[i].className)){
   ra.push(a[i]);
   }
  }
 return ra;
 }
getElementByClass("foo","div",document.getElementById("bar")) // only div's with the class foo in the element bar
getElementByClass("foo") // all elements with the class bar

Untested, should work though

Fotiman

5:54 pm on Mar 14, 2008 (gmt 0)

Here's a quick example that I threw together. It uses the Yahoo UI Library [developer.yahoo.com] for it's great Event Utility and DOM Utility.


<!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"> 
 <style type="text/css"> 
 .hidden { 
   display: none; 
 } 
 .shown { 
   display: auto; 
 } 
 </style> 
 <title></title> 
</head> 
<body> 
<div id="container"> 
<div class="meeting">Meeting 1</div> 
<div class="meeting">Meeting 2</div> 
<div class="table">Table 1</div> 
<div class="event">Event 1</div> 
<div class="other">Other 1</div> 
</div> 
<script type="text/javascript" src="http://yui.yahooapis.com/2.5.0/build/yahoo-dom-event/yahoo-dom-event.js"></script> 
<script type="text/javascript"> 
YAHOO.util.Event.onDOMReady(function () { 
  var E = YAHOO.util.Event; 
  var D = YAHOO.util.Dom; 
  var i, ul, li, a, container = document.getElementById('container'); 
  var els = D.getElementsBy(function(el) { 
    return (D.hasClass(el, 'meeting') ¦¦ D.hasClass(el, 'table') ¦¦ D.hasClass(el, 'event') ¦¦ D.hasClass(el, 'other')); 
  }, 'div', container); 
  var meetingEls = D.getElementsByClassName('meeting', 'div', container); 
  var tableEls = D.getElementsByClassName('table', 'div', container); 
  var eventEls = D.getElementsByClassName('event', 'div', container); 
  var otherEls = D.getElementsByClassName('other', 'div', container); 
  // Create the links for showing/hiding. Since these rely solely on 
  // JavaScript, create them using JavaScript rather than putting them 
  // in your markup. This is progressive enhancement. 
  var magicLinks = [ 
    {id: 'showAll', txt: 'Show All', toShow: els}, 
    {id: 'showMtg', txt: 'Show Meetings', toShow: meetingEls}, 
    {id: 'showTbl', txt: 'Show Tables', toShow: tableEls}, 
    {id: 'showEvt', txt: 'Show Events', toShow: eventEls}, 
    {id: 'showOth', txt: 'Show Other', toShow: otherEls} 
  ]; 
  ul = document.createElement('ul'); 
  for (i = 0; i < magicLinks.length; i++) { 
    li = document.createElement('li'); 
    a = document.createElement('a'); 
    a.href = '#'; 
    a.id = magicLinks[i].id; 
    a.appendChild(document.createTextNode(magicLinks[i].txt));     
    E.on(a, 'click', function(e, toShowEls) { 
      E.stopEvent(e); 
      D.replaceClass(els, 'shown', 'hidden'); 
      D.replaceClass(toShowEls, 'hidden', 'shown'); 
    }, magicLinks[i].toShow); 
    li.appendChild(a); 
    ul.appendChild(li); 
  } 
  container.parentNode.insertBefore(ul, container); 
}); 
</script> 
</body> 
</html>

cangoalie

6:43 pm on Mar 14, 2008 (gmt 0)

Thank you very much, Fotiman. One question - how do I create links in JavaScript? and what function do they execute onClick?
Thanks again!
cangoalie

Fotiman

7:02 pm on Mar 14, 2008 (gmt 0)

In my example above I'm creating the links like this:


  a = document.createElement('a');  
  a.href = '#';  
  a.id = magicLinks[i].id;

That is, I'm creating an element of type 'a' (a link) and I'm assigning the href attribute to be '#' (which will get ignored because I stop the event from processing the link later on in my code). And I assign an id value based on what's in the magicLinks array.

Here is where I assign the onclick event listener:


  E.on(a, 'click', function(e, toShowEls) {  
   E.stopEvent(e);  
   D.replaceClass(els, 'shown', 'hidden');  
   D.replaceClass(toShowEls, 'hidden', 'shown');  
  }, magicLinks[i].toShow);

I'm using the Yahoo Event Utility to assign the event listener. The first argument is the element (a = the link), the 2nd argument is the event ('click'), the 3rd argument is the function to execute (in my case, I'm defining an anonymous function). The Yahoo UI Library is very well documented if you'd like to learn more about it.

cangoalie

8:16 pm on Mar 14, 2008 (gmt 0)

I don't understand. Based on what you have explained, the JavaScript should be creating the links itself. But when I upload it and test it, it does not.
What is going on?

Fotiman

8:41 pm on Mar 14, 2008 (gmt 0)

Oh, I probably should have mentioned that this forum replace the pipe character, so go through the code and replace all instances of ¦¦ with actual pipe characters and it should work.

cangoalie

9:37 pm on Mar 14, 2008 (gmt 0)

It works! Thank you very much for your help!
-cangoalie

cangoalie

9:54 pm on Mar 14, 2008 (gmt 0)

Actually, I have one more question for you. The code all works fine, but the problem is how to access it. For this page, I have a "ul li" link menu and I need to position all the "a" tags inside this menu. Is this possible? Would it simply be easier to write the "a" tags with the onClick function? would I need to change the function for it to execute in HTML?
E.on(a, 'click', function(e, toShowEls) {
E.stopEvent(e);
D.replaceClass(els, 'shown', 'hidden');
D.replaceClass(toShowEls, 'hidden', 'shown');
}, createLinks[i].toShow);
li.appendChild(a);
ul.appendChild(li);
}

cangoalie

9:29 pm on Mar 15, 2008 (gmt 0)

Or is their a function I can run where I want the links to be?
Please help!

cangoalie

12:05 am on Mar 16, 2008 (gmt 0)

OK, I re-read the code over and over and looked some stuff up, and I understand now - you're creating a ul li of your own using the code. The problem is, for my code to display right, I need the "ul" to have the id "submenu", and I need one of the "li" to have the id "last". How do I give these elements IDs using your code?

Fotiman

2:49 pm on Mar 17, 2008 (gmt 0)


 ul = document.createElement('ul'); 
 ul.id = 'submenu'; 
 for (i = 0; i < magicLinks.length; i++) {  
  li = document.createElement('li');  
  if (i == magicLinks.length - 1) { 
   li.id = 'last'; 
  } 
  a = document.createElement('a');  
  a.href = '#';  
  a.id = magicLinks[i].id;   a.appendChild(document.createTextNode(magicLinks[i].txt));    
  E.on(a, 'click', function(e, toShowEls) {  
   E.stopEvent(e);  
   D.replaceClass(els, 'shown', 'hidden');  
   D.replaceClass(toShowEls, 'hidden', 'shown');  
  }, magicLinks[i].toShow);  
  li.appendChild(a);  
  ul.appendChild(li);  
 }

Fotiman

2:51 pm on Mar 17, 2008 (gmt 0)

Here is the same code but with the new changes bolded:
ul = document.createElement('ul');
ul.id = 'submenu';
for (i = 0; i < magicLinks.length; i++) {
li = document.createElement('li');
if (i == magicLinks.length - 1) {
li.id = 'last';
}
a = document.createElement('a');
a.href = '#';
a.id = magicLinks[i].id; a.appendChild(document.createTextNode(magicLinks[i].txt));
E.on(a, 'click', function(e, toShowEls) {
E.stopEvent(e);
D.replaceClass(els, 'shown', 'hidden');
D.replaceClass(toShowEls, 'hidden', 'shown');
}, magicLinks[i].toShow);
li.appendChild(a);
ul.appendChild(li);
}