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 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Mar 2009
    Posts
    7
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Javascript Expanding Menu query

    Hi, there.

    I have a simple existing CSS rollover menu that I've recently added sub-level options to, using Javascript to expand a group with one click using the 'show' command and another click to contract it again with the 'hide' command.

    I'm a total newbie to Javascript, so was wondering if anyone out there knew of an easy way to automatically contract all of the expanded groups when clicking on one of the other unexpanded ones - as opposed to having to 'hide' everything manually?

    Any help or advice that anyone can offer greatfully appreciated!

  • #2
    Regular Coder
    Join Date
    Feb 2009
    Location
    Wheeling, IL
    Posts
    358
    Thanks
    5
    Thanked 62 Times in 60 Posts
    Assign a class upon doing a show... not sure which framework we're discussing, but considering the topic, I'm guessing jQuery? Or is it something else? Anyways... after assigning a class on show, you can easily call that class and hide everything that has it, then clear it and after that assign it to the newly opened menus.

  • #3
    New to the CF scene
    Join Date
    Mar 2009
    Posts
    7
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Eldarrion View Post
    Assign a class upon doing a show... not sure which framework we're discussing, but considering the topic, I'm guessing jQuery? Or is it something else? Anyways... after assigning a class on show, you can easily call that class and hide everything that has it, then clear it and after that assign it to the newly opened menus.
    Thanks for the quick response, but as a newbie I'm not entirely sure how to apply your recommendation! My Javascript code is from a Tutorial at tutorials-db.com, but doesn't seem to say what framework it is :

    function display (category) {
    var whichcategory = document.getElementById(category);
    if (whichcategory.className=="show") {
    whichcategory.className="hide";
    } else {
    whichcategory.className="show";
    }
    }

    and (a portion of) the HTML is :

    <a href="javascript:display('Services')" class="Group">Services</a>
    <div class="hide" id="Services">
    <a href="#" class="Option">Service 1</a>
    <a href="#" class="Option">Service 2</a>

    How do I assign a class to 'show'?

  • #4
    Regular Coder
    Join Date
    Feb 2009
    Location
    Wheeling, IL
    Posts
    358
    Thanks
    5
    Thanked 62 Times in 60 Posts
    Nope, no framework involved, looks like clean JS. Either way, as it seems, you are already assigning the class there with .className Now for the more interesting part... finding each element that is currently visible and hiding it:

    Code:
    <script type="text/javascript">
    function display (category) {
        var whichcategory = document.getElementById(category);
        var showClass = "show";
       
        var all = document.getElementsByTagName('*');
    
        var shown = new Array();
        for (var e = 0; e < all.length; e++) {
            if (all[e].className == showClass)
                shown[shown.length] = all[e];
        }
    
        if (whichcategory.className == showClass)
            whichcategory.className = "hide";
        else {
            for (var i = 0; i < shown.length; i++)
                shown[i].className = "hide";
            whichcategory.className = showClass;
        }
    }
    </script>
    Probably _not_ the best way to do it... and I'm not sure exactly how it will play out with nested locations, but I believe it can be modified to ignore elements that are parent elements of the one you're currently trying to show.

  • Users who have thanked Eldarrion for this post:

    srlagarto (03-16-2009)

  • #5
    Regular Coder
    Join Date
    Feb 2009
    Location
    Wheeling, IL
    Posts
    358
    Thanks
    5
    Thanked 62 Times in 60 Posts
    And here is the code that will take into account for a currently visible parentNode and avoid hiding it:

    Code:
    <script type="text/javascript">
    function display (category) {
    	var whichcategory = document.getElementById(category);
    	var showClass = "show";
       
    	var all = document.getElementsByTagName('*');
    
    	var shown = new Array();
    	for (var e = 0; e < all.length; e++) {
    		if (all[e].className == showClass)
    			shown[shown.length] = all[e];
    	}
    
    	if (whichcategory.className == showClass)
    		whichcategory.className = "hide";
    	else {
    		for (var i = 0; i < shown.length; i++) {
    			if (shown[i] != whichcategory.parentNode) {
    				shown[i].className = "hide";
    			}
    			whichcategory.className = showClass;
    		}
    	}
    }
    </script>
    Should work like a charm... with 1-level nesting. Once again, might be a better way. (I certainly know a better one using jQuery, but not pure JS) Though for the purposes, this one should work.

  • #6
    New to the CF scene
    Join Date
    Mar 2009
    Posts
    7
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Eldarrion View Post
    And here is the code that will take into account for a currently visible parentNode and avoid hiding it:

    Code:
    <script type="text/javascript">
    function display (category) {
    	var whichcategory = document.getElementById(category);
    	var showClass = "show";
       
    	var all = document.getElementsByTagName('*');
    
    	var shown = new Array();
    	for (var e = 0; e < all.length; e++) {
    		if (all[e].className == showClass)
    			shown[shown.length] = all[e];
    	}
    
    	if (whichcategory.className == showClass)
    		whichcategory.className = "hide";
    	else {
    		for (var i = 0; i < shown.length; i++) {
    			if (shown[i] != whichcategory.parentNode) {
    				shown[i].className = "hide";
    			}
    			whichcategory.className = showClass;
    		}
    	}
    }
    </script>
    Should work like a charm... with 1-level nesting. Once again, might be a better way. (I certainly know a better one using jQuery, but not pure JS) Though for the purposes, this one should work.
    Wow - that first script DOES work like a charm - thanks! I can't seem to get this second one to work, though - am I doing something wrong? Just seems to be the last few lines that are different, but for whatever reason the script appears to stop working altogether.

    I'm very grateful for your prompt assistance and would certainly be interested in learning more about jQuery, if you feel that is the better framework to use - any pointers for resource / tutorials?
    Last edited by srlagarto; 03-16-2009 at 12:06 PM.


  •  

    Posting Permissions

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