"unhiding" ul if url in that section selected

JavaScript
1

Hi all
This maybe a js or a css or a php question I just don’t know the best way to do it. I have an accessible css hide/show navigation but I need to show the relevant section when the user is on a page in that section. Specifically in the left navigation you can see what I mean: http://tinyurl.com/84ovgvu What is the best way to do this? Thank you

If it helps here is the toggle js

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('a')[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 http://www.quirksmode.org/blog/archives/2005/10/_and_the_winner_1.html */
	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, http://www.snook.ca/jonathan
Add-ons by Robert Nyman, http://www.robertnyman.com
*/
	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');});
2

This is the least invasive method of achieving that (given your existing code) but it doesn’t automatically follow it’s the best way. The jQuery selectors used are quite intensive, and you’d be better off writing a class to the body indicating the active link, then writing CSS to act upon that combination.

Code below. Demo version here.

<!--
=======================================================================================================================
  START OF EDIT
=======================================================================================================================
//-->
  <!-- Removed this script (appears higher up in your original code //-->
  <!-- <script type="text/javascript" src="http:togglemenu.js"></script> //-->
  <style>
    ul.menu ul{
      display: none; /* Initially hide all unordered lists inside ones with class "menu" */
      }
  </style>
  
  <script>
    jQuery(document).ready(
      function(){
        expandMenu(); // Call this function after the DOM is loaded
        setToggles(); // Call this function after the DOM is loaded
      }
    );
    
    function expandMenu(){
      var thisURL = document.location.href; // get current URL
      var index = thisURL.lastIndexOf("/"); // find the position of the last forward slash in URL
      var filename = thisURL.substr(index+1); // file name is everything after last forward slash + one character (the slash itself)
      jQuery('.menu a[href='+filename+']').parents('ul').show(); // Find all menu items linking to current page and set its parent ULs visible
    }
    
    function setToggles(){
      jQuery('.menu > li > a').click(function(e){ // Select direct descendents only: link inside list item inside .menu
        e.preventDefault(); // prevent default behavior (follow link)
        jQuery(this).siblings('ul').toggle(); // Find unordered lists which are siblings of clicked link and display if they are hidden (hide if displayed)
      });
    }
  </script>
<!--
=======================================================================================================================
  END OF EDIT
=======================================================================================================================
//-->
3

Thank you for the reply really interesting I will get a min jquery and try it looks pretty sweet. I’ll also investigate the css method. Thanks again