expand all and collapse all help

[skald89]

I want to add a + - for collapse and expand all. I would prefer to have them change accordingly but it isnt necessary.

this is my javascript

var toggleMenu = {
    init : function(sContainerClass, sHiddenClass) {
        if (!document.getElementById || !document.createTextNode) {return;} // Check for DOM support
        var arrMenus = this.getElementsByClassName(document, 'ul', sContainerClass);
        var arrSubMenus, oSubMenu, oLink;
        for (var i = 0; i < arrMenus.length; i++) {
            arrSubMenus = arrMenus[i].getElementsByTagName('ul');
            for (var j = 0; j < arrSubMenus.length; j++) {
                oSubMenu = arrSubMenus[j];
                oLink = oSubMenu.parentNode.getElementsByTagName('p')[0];
                oLink.onclick = function(){toggleMenu.toggle(this.parentNode.getElementsByTagName('ul')[0], sHiddenClass); return false;}
                this.toggle(oSubMenu, sHiddenClass);
            }
        }
    },
    toggle : function(el, sHiddenClass) {
        var oRegExp = new RegExp("(^|\\s)" + sHiddenClass + "(\\s|$)");
        el.className = (oRegExp.test(el.className)) ? el.className.replace(oRegExp, '') : el.className + ' ' + sHiddenClass; // Add or remove the class name that hides the element
    },
/* addEvent function from [url]http://www.quirksmode.org/blog/archives/2005/10/_and_the_winner_1.html[/url] */
    addEvent : function(obj, type, fn) {
        if (obj.addEventListener)
            obj.addEventListener(type, fn, false);
        else if (obj.attachEvent) {
            obj["e"+type+fn] = fn;
            obj[type+fn] = function() {obj["e"+type+fn](window.event);}
            obj.attachEvent("on"+type, obj[type+fn]);
        }
    },
/*
Written by Jonathan Snook, [url]http://www.snook.ca/jonathan[/url]
Add-ons by Robert Nyman, [url]http://www.robertnyman.com[/url]
*/
    getElementsByClassName : function(oElm, strTagName, strClassName){
        var arrElements = (strTagName == "*" && document.all)? document.all : oElm.getElementsByTagName(strTagName);
        var arrReturnElements = new Array();
        strClassName = strClassName.replace(/\-/g, "\\-");
        var oRegExp = new RegExp("(^|\\s)" + strClassName + "(\\s|$)");
        var oElement;
        for(var i=0; i<arrElements.length; i++){
            oElement = arrElements[i];      
            if(oRegExp.test(oElement.className)){
                arrReturnElements.push(oElement);
            }   
        }
        return (arrReturnElements)
    }
};
toggleMenu.addEvent(window, 'load', function(){toggleMenu.init('menu','hidden');});
   function exall() {
   for (inde=1;inde<=5;inde=inde+2) {
   ToggleRowVisibility("paneltable",inde);
   }
   }

this is my html code

<script type="text/javascript">
function MM_showHideLayers() { //v9.0
  var i,p,v,obj,args=MM_showHideLayers.arguments;
  for (i=0; i<(args.length-2); i+=3) 
  with (document) if (getElementById && ((obj=getElementById(args[i]))!=null)) { v=args[i+2];
    if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v=='hide')?'hidden':v; }
    obj.visibility=v; }
}
</script>


<div id="apDiv1">
<ul class="menu">
<ul>
   <li><p class="years">2008</p>
   <ul>
   <li><p class="submenu">Freshman</p></li>
   <li><p class="submenu">Internship</p></li>
   </ul>
   </li>

   <li><p class="years" >2009</p>
   <ul>
   <li><p class="submenu" >Sophmore</p></li>
   <li><p class="submenu" >Freelance</p>
   </li>
   </ul>
   </li>

   <li><p class="years" >2010</p>
   <ul>
   <li><p class="submenu" >Junior</p></li>
   </ul>
   </li>

   <li><p class="years" >2011</p>
   <ul>
   <li><p class="submenu" >Junior</p></li>
   </ul>
   </li>
</ul>
</ul>
</div>

[codewall]

maybe this can give you an idea
http://codewall.blogspot.com/2009/08/toggle-background-color-using.html

[skald89]

maybe this can give you an idea
http://codewall.blogspot.com/2009/08/toggle-background-color-using.html

Thanks but thats for toggling color.

[codewall]

Ok, maybe this one is what you want...
http://codewall.blogspot.com/2011/01/div-expand-and-collapse-in-javascript.html

[skald89]

Ok, maybe this one is what you want...
http://codewall.blogspot.com/2011/01/div-expand-and-collapse-in-javascript.html

Thanks it seems to work. It needs some tweaking, hopefully it will work as nicely as the current expand/collapse coding I am currently using.

I tested the code out a little. It seems to work but it has one flaw that I noticed so far.
Lets say the first set is expanded and the second set is collapsed. When you press expand all / collapse all, it toggles between the first and second set being expanded and collapsed. I dont get the point of a code doing that and not just actually expanding and collapsing all sets no matter which is open or closed.

[codewall]

Actually I've seen this already because the function toggle it depends on its display. But you can modify it to be useful in your code. By the way thanks for using it and commenting on it. You can add your comment
http://codewall.blogspot.com/2011/01/div-expand-and-collapse-in-javascript.html
in that post, I mean in the blog for everyone who will use code also.
Thanks...

[skald89]

Actually I've seen this already because the function toggle it depends on its display. But you can modify it to be useful in your code. By the way thanks for using it and commenting on it. You can add your comment
http://codewall.blogspot.com/2011/01/div-expand-and-collapse-in-javascript.html
in that post, I mean in the blog for everyone who will use code also.
Thanks...

its your own blog? Do you write the codes?

[codewall]

Yes, I write it and I want also to be use by others, also I want them to comment if there is something flaw. It helps all of us specially those who starting to study programming... By the way thanks for commenting.

[skald89]

Yes, I write it and I want also to be use by others, also I want them to comment if there is something flaw. It helps all of us specially those who starting to study programming... By the way thanks for commenting.

did you write the code for the comment form? If you can give it to me it would be very helpful. Thanks!

[codewall]

Thanks, I already revise it, here's now the new code:
http://codewall.blogspot.com/2011/01/div-expand-and-collapse-in-javascript.html

[skald89]

Thanks, I already revise it, here's now the new code:
http://codewall.blogspot.com/2011/01/div-expand-and-collapse-in-javascript.html

How come each one is in its own div and it isnt just an ul/li?

[codewall]

actually it can be done using ul/li, it just an example... regards