onclick, open all divs, onclick again, close all divs with a text link

Hi,
  I have a page with 12 divs that when clicked on, they will open to show hidden data.
I need to have a text link at the top of the page that will expand or open all 12 divs, and, if you click this text link again, it will close all 12 divs.
  Originally, I had a checkbox do this. Here is the script for the checkbox:

<script>
function expand(theBox){
  var cEx = (theBox.checked==true)?"O":"C";
  for(i=0;i<ccollect.length;i++){
    closecontent(ccollect[i].id)
    if(ccollect[i].id.replace(/\d/g,'')==cEx){
      expandcontent(ccollect[i].id)
    }
  }
}
</script>

In, the previous script, the "O" is for the open state of the 12 divs, and the "C" is for the closed state of the 12 divs.

And, here is the checkbox code:
<input type="checkbox" onclick="expand(this)">

 
Any help with this will be greatly appreciated.
Thanks!
-Ron.
ron4721Asked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

StormyWatersCommented:
What do you mean, the "open state" or the "closed state" ?
0
ron4721Author Commented:
The "O" is the ID name for the open divs (e.g. <div ID="O1" class="switchcontent"> )
And, the "C" is the ID name for the closed divs (e.g.  <div ID="C1" class="switchcontent"> )

Sorry, if I didn't explain clearly.  If you need any more info, please let me know and I'll try to explain better. Thanks.
0
StormyWatersCommented:
Sorry, I misunderstood your problem. You could pretty much recycle the same function, like so:

<script>
var toggle = false;
function expand(theBox){
  var cEx = toggle?"O":"C";
  toggle = !toggle;
  for(i=0;i<ccollect.length;i++){
    closecontent(ccollect[i].id)
    if(ccollect[i].id.replace(/\d/g,'')==cEx){
      expandcontent(ccollect[i].id)
    }
  }
}
</script>
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

ron4721Author Commented:
Hi,
  It seems to work, but for some reason, I have to doubleclick on the link first for all the divs to open up, then, if i click once again, they all close, click once again, they all open.
Any ideas why i have to click twice on the link initially?

Here's my code for the link:
<a href="javascript: void(0);" class="aftblueline" onclick="expand(this)">Full Year Detail</a>
0
COBOLdinosaurCommented:
Do the link this way:

<a href="C" onclick="this.href=expand(this.href);return false;">
   <span id="thetext">Open layers</span></a>

Then change teh script this way:
<script type="text/javascript">
function expand(x){
  var cEx = (x=="C") ? "O" : "C";
  for(i=0;i<ccollect.length;i++){
    closecontent(ccollect[i].id)
    if(ccollect[i].id.replace(/\d/g,'')==cEx){
      expandcontent(ccollect[i].id)
    }
  }
  document.getElementById('thetext')=(cEx=="C") ? "Open layers" : "Close layers";
  return cEx;
}
</script>

That will also change the link text based on the state

Cd&
0
StormyWatersCommented:
For mine, change this:
var toggle = false;

to this:
var toggle = true;

to fix the problem.
0
ron4721Author Commented:
Thanks Stormy! It works now......

COBOL, thanks for your script, but I tried it and it didn't work....Any ideas?

I do like the idea of having the link text change each time you click on it.

0
StormyWatersCommented:
Add this (untested, sorry):

<script>
var toggle = true;
function expand(theBox){
  var cEx = toggle?"O":"C";
  toggle = !toggle;
  for(i=0;i<ccollect.length;i++){
    closecontent(ccollect[i].id)
    if(ccollect[i].id.replace(/\d/g,'')==cEx){
      expandcontent(ccollect[i].id)
    }
  }
  theBox.innerHTML = toggle?"Close layers":"Open layers";
}
</script>

Sorry, have to leave, might need to switch it to:
theBox.innerHTML = toggle?"Open layers":"Close layers";

Can't think/test right now :P
0
COBOLdinosaurCommented:
Sorry I was a little to quick to post it.  The initial value of the href includes the path, and I forgot the innerHTML property on the text update.

<a href="C" onclick="this.href=expand(this.href);return false;">
<span id="thetext">Open layers</span></a>

<script type="text/javascript">
function expand(x){
if (x.length>1) x="C";
var cEx = (x=="C") ? "O" : "C";
for(i=0;i<ccollect.length;i++){
closecontent(ccollect[i].id)
if(ccollect[i].id.replace(/\d/g,'')==cEx){
expandcontent(ccollect[i].id)
}
}
document.getElementById('thetext').innerHTML=(cEx=="C") ? "Open layers" : "Close layers";
return cEx;
}
</script>



Cd&
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
ron4721Author Commented:
Hi Stormy,
  I just realized....my divs can't open up now that i added your script.
0
ron4721Author Commented:
Thanks Cd&,
  I really appreciate your help.  It works fine and I appreciate the link text changing.
Very useful.
-Ron.

0
ron4721Author Commented:
Hi Stormy,
   I DO appreciate all of your help as well.  Sorry, but, it was something I needed rather soon.  But I thank you also for all of your help.  You were very helpful! :)
-Ron.
0
COBOLdinosaurCommented:
Glad we could help.  Thanks for the A. :^)

Cd&
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.