Javascript Expand/Collapse Div Script Help

[virginiachic]

I am totally new to Javascript and I currently have a code I am using to expand a div on click and then collapse it on click. However, I need to change/add to it so that when one div is clicked the others that are open collapse (i.e., only one div can be open at a time). I have no idea how to modify the code so that it does this - I tried using a canned code off the internet but it messed up with the accordion effect of the content.

Here is the page (the 3 sections that expand/collapse are the left side navigation - so only one of them should be open showing the sublinks at a time):

http://www.retoldstory.com/products/products.html

Here is the code that I am using:

function expcoll(div) {
var el = document.getElementById(div);
if ( el.style.display == "none" ) {
el.style.display = '';
}
else {
el.style.display = 'none';
}
}


Thank you for your help!!

 

[grtammi]

Too bad you weren't using jquery.

Anyways, you'll probably have to check the name of the div coming thru, and hide the other two immediately, and then perform the check on the style of the div in question.

function expcoll(div) {
  switch(div) {
    case "PNComplete" :
      document.getElementById("PNInvoices").style.display="none" ;
      document.getElementById("PNPO").style.display="none";
      break ;
    case "PNInvoices" :
      document.getElementById("PNComplete").style.display="none" ;
      document.getElementById("PNPO").style.display="none";
    case "PNPO" :
      document.getElementById("PNComplete").style.display="none" ;
      document.getElementById("PNInvoices").style.display="none";
    default:
      // something weird came thru
      return ;
  }
  
  /* the rest of your function here */

Greg

 

[grtammi]

oops ... forgot the break statement in the 2nd and 3rd cases - you'll have to make sure you insert those.

Greg

 

[virginiachic]

Thank you soooo much! You have made my entire day. I wish I had used JQuery, too, and I tried to switch to it but unfortunately I didn't know enough of it to be able to figure out how to exactly replicate what Mootools was doing.

Can you help me with one more thing? I keep getting an error on the page that I can't figure out. Firebug says this about it:

element has no properties
find(null, "nextSibling")prototype.lite.js (line 96)
(no name)(div.tab, 9)expcoll.js (line 16)
each(function())moo.fx.pack.js (line 216)
init()expcoll.js (line 15)
[Break on this error] while (element.nodeType != 1) element = element[what];

Do you have any idea what is going on? Thanks again!!

 

[grtammi]

I'm not 100% familiar with MooTools, so without installing and grabbing a copy of your code to test with ... not much I can do.

But I did check your page and see that the posted code is working for you.

Greg

 

[virginiachic]

Thanks, Greg! I really appreciate your help and your script!