如何打开特定的手风琴div？

Question

This seems a straight forward question but I can't seem to find the answer to this. I'm trying to expand, open, collapse (whichever youd like to call it) a specific accordion. Say I have three panels, with ids #panel1, #panel2, and #panel3. And I have the panel headings with #p1, #p2, #p3.

If I click on the headings everything works great, #p1 will open #panel1, like how accordion is supposed to work. But I have a seperate link on the page which I'd like it to open #panel2.

slideToggle, and slideDown cause issues since if you click the heading after, it messes with accordion. I don't want to use hash so I added this to onclick on the link I want to open panel2.

$("#p2").click();

This works great, except if you click on that link again, it'll close the accordion div, I'd like it to stay open. Any ideas? Thanks much in advance.

Answer 1

You can make the second panel active by setting the active option .

$("#accordion").accordion("option", "active", 1);

Or assuming your accordion HTML is default jQuery UI syntax (header/div/header/div/etc.), you can get the index of the panel pragmatically with $("#panel2").index("#accordion div")

$("#accordion").accordion("option", "active", $("#panel2").index("#accordion div"));

Answer 2

use an 'open' class: If it has the open class, close it and remove 'open' class. otherwise, open it, and add an 'open' class. instead of clicking it with the external link, just slide it up and add the open class. Here is a very basic jquery accordian. http://jsfiddle.net/L8fMq/2/

<style>
.contents {display:none; border: 1px solid #ccc; }
.header {padding: 10px; border: 1px solid #ccc; background-color: #ddd;
</style>

<a class='externalLink'>Open Panel 2</a>
<div class='panel panel1'>
    <div class='header'>Panel 1</div>
    <div class='contents'>
        <p>A bunch of content</p>
    </div>
</div>
<div class='panel panel2'>
    <div class='header'>Panel 2</div>
    <div class='contents'>
        <p>A bunch of content</p>
    </div>
</div>
    <div class='panel panel3'>
    <div class='header'>Panel 3</div>
    <div class='contents'>
        <p>A bunch of content</p>
    </div>
</div>

$('.panel .header').click(function(){
    if($(this).parent().hasClass("open")){
        $(this).parent().find(".contents").slideUp();
        $(this).parent().removeClass("open");
    }
    else {
        $(this).parent().find(".contents").slideDown();
        $(this).parent().addClass("open");
    }
        $(this).parent().siblings().find(".contents").slideUp();
    });
$('.externalLink').click(function(){
    $('.panel2 .contents').slideDown().parent().addClass("open");

    $(this).parent().siblings().find(".contents").slideUp();
});

Answer 3

This should do the trick:

$("#p2").click(function () {
    $("#accordion").accordion("option", "active", 1);
});