Expandable Menu (with Submenus) And Unique Highlighted Selection Of List Elements

I am trying to create a menu that contains a variety of sub lists (up to three levels). The idea is the user should be able to expand and contract all of the options at any time, b

Solution 1:

Your jQuery is a mess :) Try this self explained code :

jQuery(document).ready( function() {
      $('#Ul1, #Ul2, #Ul3').hide(); // HIDE THE UL(s)
      $('#container1 > li').on('click', function() { // ON PARENT LI CLICK
        $(this).addClass('selected').siblings().removeClass('selected'); // ADD A CLASS SELECTED
TO THE CLICKED LI AND REMOVE THIS CLASS FROM OTHER PARENT LI
        $('.selected').children('ul').toggle(); // SHOW THE CHILDREN OF SELECTED
OR HIDE THEM BACK
        $('.selected').siblings().children('ul').hide(); // HIDE THE UL CHILDREN OF THE OTHER PARENT LI (IN CASE ANOTHER PARENT LI IS CLICKED WHILE ONE HAS HIS CHILDREN OPENED) 
        $('.selected').children('span').css("background-color", "#FFFF00"); // THE SAN OF SELECTED HAS A YELLOW COLOR
        $('.selected').siblings().children('span').css("background-color", ""); // THE SPAN OF THE SIBLIGNS OF SELECTED ARE/REMAINS WHITE
      });
    });

---

Of course, there are many ways to accomplish it, I'm just showing you the logic. Hope this helps, SYA ;) And this is a fiddle ;)