0

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>

Edited by mike_2000_17: Fixed formatting

2
Contributors
11
Replies
12
Views
6 Years
Discussion Span
Last Post by codewall
0

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.

Edited by skald89: n/a

0

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.

0

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!

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.