942,964 Members | Top Members by Rank

Ad:
Jan 13th, 2010
0

Adding expand / collapse all link to expandable menu

Expand Post »
Hello everyone, I'm still pretty new to javascript and require a little help. Basically, I wrote my first script, which was designed for innerHTML, and tann I found a website which showed me a few things. It showed me how to use two links per harder, one shown, one hidden, and they just swap out. The final outcome allows ot to do almost any and everything I want ot to.

First and foremost, here is the script:
JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
  1. function veksle(id,vi){
  2. eclipsed = document.getElementById(id+"co");
  3. enlightened = document.getElementById(id+"ex"); if(
  4. eclipsed.style.display == "block"){
  5. eclipsed.style.display = "none";
  6. enlightened.style.display = "block";} else {
  7. eclipsed.style.display = "block";
  8. enlightened.style.display = "none";}
  9.  
  10. if(vi){ ljosa(id,vi);}}
  11. function ljosa(id,vi){
  12. for (var i = 0 ; i <vi.length ; i++){if(vi[i] != id){
  13. document.getElementById(vi[i]+"co").style.display = "block";
  14. document.getElementById(vi[i]+"ex").style.display = "none";} } }
  15. var gr = new Array();
  16. gr[gr.length] = "l01";
  17. gr[gr.length] = "l02";

And, in a nutshell, here is the html portion:
JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
  1. <div id="l01co" style="display: block">
  2. <a onclick="veksle('l01',gr)">Show</a></div>
  3.  
  4. <div id="l01ex" style="display: none">
  5. <a onclick="veksle('l01',gr)">Hide</a>
  6. <ul>
  7. <li>Subset</li>
  8. <li>Subset</li>
  9. </ul>
  10. </div>
  11.  
  12. <div id="l02co" style="display: block">
  13. <a onclick="veksle('l02',gr)">Show</a></div>
  14.  
  15. <div id="l02ex" style="display: none">
  16. <a onclick="veksle('l02',gr)">Hide</td></a>
  17. <ul>
  18. <li>Subset</li>
  19. <li>Subset</li>
  20. </ul>
  21. </div>

I've set the menu to only allow one menu opened at a time. Thus, it is prudent to add an expand all link. I've searched all through the web and have found nothing. Any help is much appreciated. As a side note, for anyone who helps me, if you pm me a link to your site I'll credit you as script co-creator.
Similar Threads
Reputation Points: 10
Solved Threads: 0
Newbie Poster
Bloodhand is offline Offline
2 posts
since Jan 2010
Jan 14th, 2010
0
Re: Adding expand / collapse all link to expandable menu
JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
  1. function showAll() {
  2. var hDivs = document.getElementsByTagName("div")
  3. for(var i=0; i<=hDivs.length; i++) {
  4. if(hDivs[i].style.display = "none"){
  5. hDivs[i].style.display = "block";
  6. }
  7. }
  8. }

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
  1. <body>
  2. <a onclick="showAll()">Show All</a>
  3. ...
Reputation Points: 10
Solved Threads: 1
Newbie Poster
Maujor is offline Offline
5 posts
since Jan 2010
Jan 14th, 2010
0
Re: Adding expand / collapse all link to expandable menu
Thank you for the help, that works
Reputation Points: 10
Solved Threads: 0
Newbie Poster
Bloodhand is offline Offline
2 posts
since Jan 2010

This thread is more than three months old

No one has posted to this discussion for at least three months. Please let old threads die and do not reply to them unless you feel you have something new and valuable to contribute that absolutely must be added to make the discussion complete. Otherwise, please start a new thread in this forum instead.
Message:
Previous Thread in JavaScript / DHTML / AJAX Forum Timeline: disable, enable a text box
Next Thread in JavaScript / DHTML / AJAX Forum Timeline: validation





About Us | Contact Us | Advertise | Acceptable Use Policy
Forum Index | Build Custom RSS Feed


Follow us on Twitter


© 2011 DaniWeb® LLC