Multi tool use

Open jQuery accordion panel with link (outside of acccordion)

Still new to jQuery!

I have an accordion that was built with the jQuery UI 1.10.1. It's pretty basic; the first item is showing by default, and the others are hidden until clicked on. I'd like to use links that exist above a jQuery accordion to open a certain accordion panel when clicked. It looks something like this:

Link1 Link2 Link3

| Accordion Header 1 |

| Accordion content 1 showing|

| Accordion Header 2 |

| Accordion content 2 hidden |

| Accordion Header 3 |

| Accordion content 3 hidden |

..so that when you click on "Link2", it hides Accordion content 1 and shows Accordion content 2.

I've searched the site and none of the answers seemed fitting.

Thanks

2 Answers
2

You could probably use a different method for linking the button to the header sections, I just used the id from the button.

But essentially:

$( "#accordion" ).accordion();

$('.section-button').on('click', function(){
var header = $('#accordion').find('.' + this.id);
header.click();
});


Demo here

As of Jul 1st 2018, if you run into this you can do:

$('#accordion').accordion({active:0})


Replace the 0 with the index of the tab. 0 will open the first, 1 the next etc..

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.