通过外部链接访问jQuery手风琴

Question

I have used Jquery UI accordion in my page and it is working as expected.

I need to open the accordion panel with an external link which is a drop-down. How can I access accordion even with the drop-down list menu.

Here is what I have done so far

// JavaScript Document
$(document).ready(function () {

    //Add list menu
    $('.droplist > li').hover(function () {
        $(this).find('ul').toggle();
    });

    //Accordion
    $( "#accordion" ).accordion({
          collapsible: true,
          active: false,
          heightStyle: "content"
        });
});

DEMO

PS : HTML format can not be changed.

Answer 1

As the HTML cannot be change, you can try this:

$('.droplist > li > ul > li').on('click', function(){
    index = $(this).index();
    $( "#accordion" ).accordion( "option", "active", index );
});

Demo

Reference

.index()

accordion - option

Answer 2

I may be mis-understanding the problem, but to me you are asking how to automatically open the first accordion item?

$('#accordion li a').first().trigger('click');

This will trigger the first accordion item to open.

DEMO