Hi,
I've built an accordion-style navigation from an unordered list, and I
want it to show the active page, but can't work out how to do it.
UI Accordion does it perfectly, and I would use it but I want the
section header links to be clickable as well as expandable.
This is the list:
<div id="sidebar">
<ul id="nav">
<li id="home"><a href="/au/about_us/careers/lifesavers/
index.htm">Lifesavers</a>
<ul>
<li id="life-pro"><a href="/au/about_us/careers/
lifesavers/recruitment_process.htm">Lifesavers recruitment process</
a></li>
<li id="life-services"><a href="/au/about_us/careers/
lifesavers/our_services.htm">Our services</a>
<ul>
<li id="life-serv-a"><a href="/au/about_us/
careers/lifesavers/our_services/service-a.htm">Service A</a></li>
<li id="life-serv-b"><a href="/au/about_us/
careers/lifesavers/our_services/service-b.htm">Service B</a></li>
<li id="life-serv-c"><a href="/au/about_us/
careers/lifesavers/our_services/service-c.htm">Service C</a></li>
<li id="life-serv-d"><a href="/au/about_us/
careers/lifesavers/our_services/service-d.htm">Service D</a></li>
<li id="life-serv-e"><a href="/au/about_us/
careers/lifesavers/our_services/service-e.htm">Service E</a></li>
</ul>
</li>
<li id="life-meet"><a href="/au/about_us/careers/
lifesavers/meet_lifesavers.htm">Meet our lifesavers</a></li>
<li id="life-com"><a href="/au/about_us/careers/
lifesavers/community.htm">Lifesavers in the community</a></li>
<li id="life-faq"><a href="/au/about_us/careers/
lifesavers/faq.htm">FAQ</a></li>
</ul>
</li>
</ul>
</div>
There is a page for Our services which needs to be accessible, so I've
done this by prepending a widget to each anchor which is clickable:
$(function(){
$('#nav ul li:has(ul)').each(function(i){
$(this).prepend('<a class="widget" href=""></a>');
});
$('.widget').click(function(){
$(this).siblings("ul").slideToggle('slow');
$(this).toggleClass("open");
return false;
});
});
This works just fine, but I can't work out how to show the active page
down the list.
Basically, I want to
1. get the page's filename
2. check if the filename is the same as a link's href
3. apply the class "current" to the anchor
4. check if the anchor's parent list has parents
5. expand the list if it does
I've tried the recommended approach
http://docs.jquery.com/Tutorials:Auto-Selecting_Navigation
$(function(){
var path = location.pathname.substring(1);
$('#nav a...@href$="' + path + '"]').attr('class', 'current');
});
but it returns the whole path http://www. xxxx /au/about_us/careers/
lifesavers/our_services/service-a.htm, not just the filename (service-
a.htm), which is what I want.
I've been trying to learn by doing and I've tried as many solutions as
I could find on Google, but i just can't seem to get it to work and
with a deadline looming I'd really appreciate any help.
Thanks in advance.
David
