?
Solved

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

Posted on 2004-11-26
13
Medium Priority
?
735 Views
Last Modified: 2010-05-18
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.
0
Comment
Question by:ron4721
  • 6
  • 4
  • 3
13 Comments
 
LVL 13

Expert Comment

by:StormyWaters
ID: 12682380
What do you mean, the "open state" or the "closed state" ?
0
 

Author Comment

by:ron4721
ID: 12682543
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
 
LVL 13

Expert Comment

by:StormyWaters
ID: 12682595
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
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 

Author Comment

by:ron4721
ID: 12682625
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
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 12682626
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
 
LVL 13

Expert Comment

by:StormyWaters
ID: 12682646
For mine, change this:
var toggle = false;

to this:
var toggle = true;

to fix the problem.
0
 

Author Comment

by:ron4721
ID: 12682698
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
 
LVL 13

Expert Comment

by:StormyWaters
ID: 12682810
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
 
LVL 53

Accepted Solution

by:
COBOLdinosaur earned 1600 total points
ID: 12682820
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
 

Author Comment

by:ron4721
ID: 12682855
Hi Stormy,
  I just realized....my divs can't open up now that i added your script.
0
 

Author Comment

by:ron4721
ID: 12682888
Thanks Cd&,
  I really appreciate your help.  It works fine and I appreciate the link text changing.
Very useful.
-Ron.

0
 

Author Comment

by:ron4721
ID: 12682937
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
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 12683493
Glad we could help.  Thanks for the A. :^)

Cd&
0

Featured Post

Hire Technology Freelancers with Gigs

Work with freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely, and get projects done right.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

I've been trying to accomplish this for a while and it just struck me yesterday how to accomplish this task. I have done searches all over the internet looking for ways to email pages from my applications and finally I have done it!!! Every single s…
This article discusses the difference between strict equality operator and equality operator in JavaScript. The Need: Because JavaScript performs an implicit type conversion when performing comparisons, we have to take this into account when wri…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

864 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question