Jquery SlideToggle .click problem

Question

Im using the following:

$(function() {
    $(".StaffSubjectClassNav ul").hide();
     $('.StaffSubjectClassNav h3').click(function(){
     $(this).toggleClass('clicked');
     $(this).next('ul').slideToggle('100');
    });
});

On the following HTML:

<h3><a href="link">Link</a></h3>
<ul>
<li>Link1</li>
<li>Link2</li>
<li>Link3</li>
</ul>

It works perfectly, hides the <UL> and shows it when I click on the <H3>.

However <a> is also a link, how can I set the script so that if they click the <a> inside the <H3> it doesn't slideToggle?

Answer 1

Wrap the h3 in the a and add the action to the link and return false. For example:

JS:

$(function() {
    $(".StaffSubjectClassNav ul").hide();
    $('#h3_link').click(function(){
        $(this).toggleClass('clicked');
        $(this).next('ul').slideToggle('100');
        return false;
    });
});

HTML:

<a href="link" id="h3_link"><h3>Link</h3></a>
<ul>
    <li>Link1</li>
    <li>Link2</li>
    <li>Link3</li>
</ul>

You might just have to change your CSS a little bit. But, this is the correct way to do it. Links are meant to be clicked, not H3 tags.