JQuery Accordion Menu Problem

JavaScript
1

I’ve got an accordion menu that expands and collapses fine, but when I click on the links contained in the lists within the links don’t open.

JavaScript snippet:


[SIZE=3]function panelCollapse() {
    $('#panels ul').hide();
    $('#panels li a').click(
                function() {
                    $(this).next().slideToggle('normal');
                    $(this).toggleClass('expanded').toggleClass('collapsed');
                    return false;
                });
}
$(document).ready(function() { panelCollapse(); });[/SIZE]

and the code for the lists:


ul id="panels">
    <li><a href="#" class="collapsed">Entertainment</a>

        <ul>
            <li><a href="http://www.onartsblock.org/">The Grand Theater</a><br />
            National and International entertainment in a restored historical treasure</li>
            
            <li><a href="http://www.marcustheatres.com/Theatre/TheatreDetail/146/?theatres=WI+-+Cedar+Creek+Cinema+-+Rothschild&amp;zipResult=146">Cedar Creek Cinema</a><br />
            A ten-screen movie theater with the largest screens in the area.</li>
            
            <li><a href="http://www.lywam.org/">Leigh Yawkey Woodson Art Museum</a><br />

            Home of the world famous Birds in Art exhibition</li>
            
            <li><a href="http://wiwoodchucks.pointstreaksites.com/view/wiwoodchucks">Wisconsin Woodchucks Baseball</a><br />
            Part of the exciting Amateur Northwood's League.</li>
        </ul>
    </li>
    <li><a href="#" class="collapsed">Recreation</a>

        <ul>
            <li><a href="http://www.dnr.state.wi.us/ORG/LAND/PARKS/specific/ribmt/">Rib Mountain State Park</a><br />
            A great place for a picnic, scenic hike, and the best view around.</li>
            
            <li><a href="http://www.skigranitepeak.com/">Granite Peak Ski Area</a><br />
            Located in Rib Mountain State Park, it’s perhaps the best downhill skiing and snowboarding facility in the Midwest.</li>
            
            <li><a href="http://www.discoverlincolncounty.com/underdownmap.htm">Underdown Recreational Area</a><br />

            A beautiful place to picnic, bike, ski, ride horseback, and hike in a 7,000-acre forest.</li>
            
            <li><a href="http://www.mountain-baytrail.org/">Mountain Bay Trail</a><br />
            An 83-mile state bicycling trail from here to Green Bay.</li>
            
            <li><a href="http://www.snowtracks.com/wisconsin/wausau.htm">Snowmobiling</a><br />
            Marathon County has more than 800 miles of scenic, well-groomed trails. Nine Mile Recreational Area Cross-country skiing in winter, hiking and biking in summer.</dd>
        </ul>    
    </li>

</ul>

If I remove the return false, the inner links work fine but it appends a ‘#’ to the end of the URL in the address bar and I’d rather it didn’t do that. How can I alter the jquery so the inner links still work but the links with the ‘#’ as href don’t append the ‘#’ to the end of the page URL?

2

I’m not experienced with this, but my suggestion would be to change

$('#panels li a').click(

to something like

$('#panels li [COLOR="Red"]a#tog[/COLOR]').click(

and then add the #tog ID to the links you want the behavior to apply to:

<li><a [COLOR="Red"]id="tog"[/COLOR] href="#" class="collapsed">Entertainment</a>

Worth a try, anyway. :slight_smile:

3

Thanks mate!. THat worked a treat!

4

I strongly suggest that a class name be used for this instead, as identifiers must always be unique.

The script with a class selector


$('#panels li a.tog').click(

and the HTML with the class attribute


<li><a href="#" class="tog collapsed">Entertainment</a>

If you require backward compatibility with IE6 because it doesn’t like multiple class names, you will need to use a wrapper instead, such as:


<li><a href="#" class="collapsed"><span class="tog">Entertainment</span></a>
5

Thanks Paul. I actually woke in the middle of the night, suddenly realizing that I had lured Sojan80 into using an ID more than once on the page!

I originally started with a class name, but then wondered if using two classes on the element would cause problems with the class replacement. Thanks for confirming that it’s not a problem.

In my tossing and turning, I decided I’d post back and suggest using a class instead and placing it on the LIs, like so:

$('#panels li.tog a').click(

Ah well, maybe another option if needed.