Member Avatar for 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>
Edited by mike_2000_17 because: Fixed formatting
  • 2 Contributors
  • 11 Replies
  • 246 Views
  • 3 Days Discussion Span
  • Latest Post Latest Post by codewall
Member Avatar for 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.

Edited by skald89 because: n/a
Member Avatar for 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?

Member Avatar for 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.

Member Avatar for 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!

Member Avatar for codewall

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

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.