Question : Accessing url variables to expand the correct menu item in JQuery Expand Function

I have a webpage that displays a sidebar menu with Main Categories and Sub-Categories.
When the user clicks on a Main Category the menu section expands to show the sub-categories.
The user can then click on the sub-category to display the products.

I used a JQuery function to expand and collapse the menu options. I used coldfusion and mysql
to query the database that contains the MainCategory table, the Category (sub) table and the
products table. The MainCategoryID and the CategoryID (sub) are bothed passed through the URL.

The problem I have is when the user clicks a sub-category other than the first one listed, it refreshes
the page and goes back to only expand the first menu item. The products are displayed correctly,
but I need it to expand the last menu item that was selected. In other words, I need to put focus
on the last selected menu item using the variables that are passed through the url.

Here is a link to the page that I am refering to, so you can see how it behaves.
http://advantagescaffold.com/products.cfm
The side menu is on the left side. it defaults to the first menu item. Once you select a different
menu option it will pass the variables through url.

I have included the expand.js file, the function that goes in the .cfm file, the section that displays
menu and the css that is associated with the JQuery function.

         
           
             1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
54:
55:
56:
57:
58:
59:
60:
61:
62:
63:
64:
65:
66:
67:
68:
69:
70:
71:
72:
73:
74:
75:
76:
77:
78:
79:
80:
81:
82:
83:
84:
85:
86:
87:
88:
89:
90:
91:
92:
93:
94:
95:
96:
97:
98:
99:
100:
101:
102:
103:
104:
105:
106:
107:
108:
109:
110:
111:
112:
113:
114:
115:
116:
117:
118:
119:
120:
121:
122:
123:
124:
125:
126:
127:
128:
129:
130:
131:
132:
133:
134:
135:
136:
137:
138:
139:
140:
141:
142:
143:
144:
145:
146:
147:
148:
149:
150:
151:
152:
153:
154:
155:
156:
157:
158:
159:
160:
161:
162:
163:
164:
165:
166:
167:
168:
169:
170:
171:
172:
173:
174:
175:
176:
177:
178:
179:
180:
181:
182:
183:
184:
185:
186:
187:
188:
189:
190:
191:
192:
193:
194:
195:
196:
197:
198:
199:
200:
201:

           
           
          ------------------------------------------------------------
expand.js:
------------------------------------------------------------
(function($) {
$.fn.expandAll = function(options) {
    var defaults = {
         expTxt : 'Show All',
         cllpsTxt : 'Hide All',
         cllpsEl : '.collapse', // the collapsible element
         trigger : '.expand', // the elements that contain the trigger of the toggle effect on the individual collapsible sections
         ref : '.expand', // the switch 'Expand All/Collapse All' is inserted before the 'ref'
         showMethod : 'show',
         hideMethod : 'hide',
         state : 'hidden', // the collapsible elements are hidden by default: use 'hidden' or 'shown'
         speed : 0,
         oneSwitch : true
    };
    var o = $.extend({}, defaults, options);   
    
    var toggleTxt = o.expTxt;
    if (o.state == 'hidden') {
      $(this).find(o.cllpsEl + ':not(.shown)').hide()
        .prev().find(o.trigger + ' > a.open').removeClass('open');
    } else {
      toggleTxt = o.cllpsTxt; 
    }
   
    return this.each(function(index) {
        var referent, $cllps, $tr;
        if (o.ref) {
            var container;
            if (this.id.length) {
              container = '#' + this.id;
            } else if (this.className.length) {
              container = this.tagName.toLowerCase() + '.' + this.className.split(' ').join('.');
            } else {container = this.tagName.toLowerCase();}
            referent = $(this).find("'" + o.ref + ":first'");
            $cllps = $(this).closest(container).find(o.cllpsEl);
            $tr = $(this).closest(container).find(o.trigger + ' > a');
        } else {
            referent = $(this);
            $cllps = $(this).find(o.cllpsEl);
            $tr = $(this).find(o.trigger + ' > a');
        }
        if (o.oneSwitch) {
            referent.before('<p class="switch"><a href="#">' + toggleTxt + '</a></p>');
        } else { 
            referent.before('<p class="switch"><a href="#">' + o.expTxt + '</a>&nbsp;|&nbsp;<a href="#">' + o.cllpsTxt + '</a></p>');
        }
		
        referent.prev('p').find('a').click(function() {
            if ($(this).text() == o.expTxt) {
              if (o.oneSwitch) {$(this).text(o.cllpsTxt);}
              $tr.addClass('open');
              $cllps[o.showMethod](o.speed);
            } else {
              if (o.oneSwitch) {$(this).text(o.expTxt);}
              $tr.removeClass('open');
              $cllps[o.hideMethod](o.speed);
            }
            return false;
    });
});};
------------------------------------------------------------
function that goes in the .cfm file
------------------------------------------------------------
$(function() {
    // --- Using the default options:
    $("h3.expand").toggler({initShow: "div.collapse:first"});
    // --- Other options:
    //$("h3.expand").toggler({method: "toggle", speed: 0});
    //$("h3.expand").toggler({method: "toggle"});
    //$("h3.expand").toggler({speed: "fast"});
    //$("h3.expand").toggler({method: "fadeToggle"});
    //$("h3.expand").toggler({method: "slideFadeToggle"});    
    $("#content").expandAll({trigger: "h3.expand", ref: "div.demo", showMethod: "slideDown", hideMethod: "slideUp", speed: 400, oneSwitch: false});
});

------------------------------------------------------------
css
------------------------------------------------------------
/*css for Expandable Containers*
/* --------
  The CSS rules offered here are just an example, you may use them as a base. 
  Shape your 'expand/collapse' content so that it meets the style of your site. 
 --------- */
* {margin:0; padding:0}
/* --- Page Structure  --- */

#wrapper{
  margin:0 auto;
  /*padding:15px 15%;*/
  text-align:left;
}

#wrapper h3 {
	margin:0;
}
#content {
  /*max-width:70em;*/
  width:100%;
  margin:0 auto;
  padding-bottom:0px;
  overflow:hidden
}
.demo {
  margin:0 auto;
  padding:0;
  position:relative;
  background:#000;
}
.collapse h4 {padding:0;}

#DocumentID, .DocumentID {margin-bottom:5px; text-align:center; color:#000;}

/* --- Headings  --- */


.expand {padding-bottom:0;}

/* --- Links  --- */
#switch, .switch {
	color:#BCB39A;
	width:220px;
	margin:0;
	padding:0 0 0 10px;
	text-align:left;
}

.expand a {
  display:block;
  padding:5px 40px 5px 10px;
  color:#8A5D3C;
}

.expand a:link, .expand a:visited {
	color:#8A5D3C;
  background:url(../images/arrow-down.gif) no-repeat;
  margin:0;
  padding:0 0 0 10px;
}

.expand a:hover, .expand a:active, .expand a:focus {
  text-decoration:none;
}
.expand a.open:link, .expand a.open:visited {
  background:url(../images/arrow-up.gif) no-repeat;
  margin:0;
  padding:0 0 0 10px;

}

/*subNav*/
.subNav a {
	color:#BCB39A;
	text-decoration:none;
}

.subNav a:hover {
	color:#8A5D3C;
	text-decoration:none;
}

.focus a {text-decoration:none; color:#fff;}
.focus a:hover {text-decoration:none;}

h3.expand {
	margin:0;
	padding:15px 0 0 0;
	font-weight:normal;
}

h4.subNav, h4.focus {
	margin:0;
	padding:0 0 5px 10px;
	font-weight:normal;
	text-transform:none;
}
------------------------------------------------------------
section that displays the menu from the .cfm file:
------------------------------------------------------------
<div class="grid_4 omega subNav">
   <div id="wrapper"> 
      <div id="content">  
         <div class="demo">
            <cfoutput query="getCategories" group="MainCategoryID">
               <h3 class="expand">#MainCategory#</h3>
               <div class="collapse">
                  <cfoutput group="CategoryID">
                     <cfif CategoryID EQ URL.CategoryID>
			<cfset theClass = "focus">
                     <cfelse>
                        <cfset theClass = "subNav">
                     </cfif>
                     <h4 class="#theClass#"><a href="products.cfm?MainCategoryID=#MainCategoryID#&CategoryID=#CategoryID#">#Category#</a></h4>
               </div>
	   </cfoutput>
        </div>
      </div>
    </div>
</div>

           
         

Answer : Accessing url variables to expand the correct menu item in JQuery Expand Function

This will hide the first menu if other category is selected:

                       
         
           
           
                 // ADD THIS
    var url = window.location.href;
	 alert(url);
    $('.demo div.collapse').each(function() {
        $(this).find('a').each(function() {
            if(url.indexOf($(this).attr("href").split('?')[1]) >= 0) {
                $(".demo").find("div[class*=collapse]:first").hide();
                $(this).parents('div.collapse').show();
            }
        });
    });

           
         