Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    May 2006
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Expand / Collapse Function Question

    My intent is to be able to expand/collapse multiple tables individually, and all at once. My current implementation allows for the "individual", but not the "all at once" functionality, because the current code I'm using just toggles.

    code:



    <html>
    <head>

    <script>

    function expandCollapse() {
    for (var i=0; i<expandCollapse.arguments.length; i++) {
    var element = document.getElementById(expandCollapse.arguments[i]);
    element.style.display = (element.style.display == "none") ? "block" : "none";
    }
    }
    </script>
    </head>

    <body>




    <p><em>Example:</em></p>
    <div id="1a" >
    <a href="javascript: expandCollapse('1a', 'bb');">Expand Layer</a>

    </div>
    <div id="bb" style="display: none;">
    <a href="javascript: expandCollapse('1a', 'bb');">Collapse Layer</a>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque eu ligula. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Ut wisi. Curabitur odio. Sed ornare arcu id diam. Integer ultricies, mauris venenatis vulputate pulvinar</p>
    </div>

    <div id="2a" >
    <a href="javascript: expandCollapse('2a', '2b');">Expand Layer</a>

    </div>
    <div id="2b" style="display: none;">
    <a href="javascript: expandCollapse('2a', '2b');">Collapse Layer</a>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque eu ligula. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Ut wisi. Curabitur odio. Sed ornare arcu id diam. Integer ultricies, mauris venenatis vulputate pulvinar</p>
    </div>

    <div id="3a" >
    <a href="javascript: expandCollapse('3a', '3b');">Expand Layer</a>

    </div>
    <div id="3b" style="display: none;">
    <a href="javascript: expandCollapse('3a', '3b');">Collapse Layer</a>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque eu ligula. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Ut wisi. Curabitur odio. Sed ornare arcu id diam. Integer ultricies, mauris venenatis vulputate pulvinar</p>
    </div>

    <a href="javascript: expandCollapse('1a', 'bb','2a', '2b','3a', '3b');">Collapse Layer</a>


    </body>
    </html>


    Is there any way to tweak this, or should I use a different function for the script... what might that be. I've got one that I think would work, but don't know how to use it. Thanks!


    (Here's the other function)
    code:

    <script>
    function expand(event){
    var tables = document.getElementsByTagName("table");
    for (var i = 0; i < tables.length; i++) {
    if(regEx2.test(tables[i].id)) {
    tables[i].style.display = 'table';
    }
    else if(regEx3.test(tables[i].id)) {
    tables[i].style.display = 'none';
    }
    }
    }

    function collapse(event) {
    var tables = document.getElementsByTagName("table");
    for (var i = 0; i < tables.length; i++) {
    if(regEx3.test(tables[i].id)) {
    tables[i].style.display = 'table';
    }

    else if(regEx2.test(tables[i].id)) {
    tables[i].style.display = 'none';
    }
    }
    }
    </script>

  • #2
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,465
    Thanks
    3
    Thanked 494 Times in 481 Posts
    Code:
    <script>
    // The object of parameter 0 will be toggled
    // other objects of the group will be hidden
    // the object or object unique id name as parameter 0 
    // each object of a group must have the same string as parameter 1 
    // this string is used as an arrayy name to collect objeces in the group
    
    function ExpandContract(obj,ary){
     if (typeof(obj)=='string'){ obj=document.getElemntById(obj); }
     if (!window[ary]){ window[ary]=[]; }
     if (!obj.ary){ window[ary].push(obj); obj.ary=window[ary]; }
     obj.style.display=(obj.style.display=='none')?'block':'none';
     for (var i=0;i<obj.ary.length;i++){ 
      if(obj.ary[i]!=obj){
       obj.ary[i].style.display='none';
     }
     }
    }
    </script>
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #3
    New to the CF scene
    Join Date
    May 2006
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Example?

    Thanks for the response! I'm unclear as to what the implementation would look like... do you have an example?


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •