Retrieving every ID within a DIV

JavaScript
1

I have a function that makes an accordion menu. It’s really handy because it saves a lot of real estate and provides a neat little piece of eye-candy for the end-user. Unfortunately, as it stands, it only accepts 1 ID for a single DIV of which to apply this menu to and I really need it to instead be applied to multiple DIVs within the DIV that makes the initial call of the function…

I’ll elaborate…

The calling function is this:


function runAccordion(index){
  var nID = "comments";
  if(openAccordion == nID)
    nID = '';
  setTimeout("animate(" + new Date().getTime() + "," + TimeToSlide + ",'"
      + openAccordion + "','" + nID + "')", 33);
  openAccordion = nID;
}

This function is called by an onclick method appended to an anchor / link. When the anchor / link is clicked on, this function makes the DIV that has the ID assigned within the variable nID “expand.” So in other words, if there’s a DIV with the ID of “comments” (like above), this calling function would make that DIV drop down to a designated height found in the external CSS file… Pretty straightforward.

What I would like to do is create a single function that initializes 1 array that contains the other DIV IDs that I would like to apply this menu system to. So for example, I would like to assign this aforementioned array the IDs of “updates”, “downloads”, etc. to provide the visitor with a collapsible menu system and by simply making 1 function that can accept the IDs seems like a good idea, right? Feedback on this is appreciated, too.

So anyway, how could I do this? I know it would have something to do with getElementById() and maybe 1 FOR loop, but the rest is a bit vague…

Any help on this would be appreciated.

2

I don’t suppose you’re using jQuery anywhere? If so you could use the Accordion UI widget

That aside, I think one of the areas where you can probably improve is by giving each collapsible element a class, that way you will have 1 class to target all of them.

In any case, why not do something like this:

function runAccordion(index, nID){
	if(openAccordion == nID) {
		nID = '';
	}
	setTimeout("animate(" + new Date().getTime() + "," + TimeToSlide + 
		",'" + openAccordion + "','" + nID + "')", 33);
	openAccordion = nID;
}

So instead of having an array of IDs, just pass in the “nID” to the click handler.

To be honest, it would probably be really beneficial to you to use a library like jQuery or Dojo - if you’re going to be doing DOM manipulation + effects then there you have 2 really good excuses to start using a library that abstracts it all way from you and reduces the amount of code you have to write. (And less cross-browser worries for you as well!)

3

John, that did it! You are the man! :.)