JQuery Accordion: Open a link instead of sliding down accordion when you click a header

UPDATE:

$('#menu1').bind('accordionchangestart', function(e, ui)
{
    console.log( 'accordionchangestart event triggered' );
    e.preventDefault();
});

I tried the code above, I do get the console message, but th开发者_JAVA百科e accordion still slides down. Is there a way to stop the accordion from sliding down at the event?

I've tried return false and e.stopImmediatePropagation(). None of them appear to prevent the accordion from sliding down.

The following is my accordion HTML:

<div id="menu1">
    <div>
        <h3><a href="#">Item 1</a></h3>
        <div>
            <a href="#">Item 1.1</a><br>
            <a href="#">Item 1.2</a><br>
            <a href="#">Item 1.3</a><br>
            <a href="#">Item 1.4</a><br>
        </div>
    </div>
    <div>
    <h3><a href="item2.html">Item 2</a></h3>
    <div></div>
    </div>
    <div>
    <h3><a href="#">Item 3</a></h3>
    <div>
        <a href="#">Item 3.1</a><br>
        <a href="#">Item 3.2</a><br>
        <a href="#">Item 3.3</a><br>
        <a href="#">Item 3.4</a><br>
    </div>
    </div>
</div>

I want the accordion to work normally except when the header link is not #. For example, Item 2's href is item2.html. In that case, I want it to function as a normal link, and open the page.

That's what you can do:

The HTML:

<div id="menu1">
    <div>
        <h3><a href="#">Item 1</a></h3>
        <div>
            <a href="#">Item 1.1</a><br>
            <a href="#">Item 1.2</a><br>
            <a href="#">Item 1.3</a><br>
            <a href="#">Item 1.4</a><br>
        </div>
    </div>
    <div>
    <h3><a href="item2.html">Item 2</a></h3>
    <div></div>
    </div>
    <div>
    <h3><a href="#">Item 3</a></h3>
    <div>
        <a href="#">Item 3.1</a><br>
        <a href="#">Item 3.2</a><br>
        <a href="#">Item 3.3</a><br>
        <a href="#">Item 3.4</a><br>
    </div>
    </div>
</div>

The Javscript:

$(document).ready(function(){
    $("#menu1 div div").hide();
    $("#menu1 div h3 a").click(function(e){
        if($(this).attr("href") == "#"){      
            e.preventDefault();
            $("#menu1 div div").slideUp();
            $(this).parent().next().slideDown();
        }
    });
});

The jsfiddle

change your click event to include something like this:

if ($(this).attr("href") != "#") {
  window.location = $(this).attr("href");
  return;
}

Can you show us the plugin you are using? Or is it homemade?

If it's a plugin, you could go to the event and say: if href different than # then go to link.

for Example

$('h3').click(function(){
   if($(this).attr('href') != '#'){ return true; }
});

Or something like that. Hard to say without the javascript script.