CODEWITHSUNDEEP
jqueryaccordion
abbyworld
abbyworld

Reputation: 47

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

Upvotes: 2

Views: 4060

Answers (2)

Aldanis Vigo
Aldanis Vigo

Reputation: 189

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..

Upvotes: 1

uv_man
uv_man

Reputation: 224

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

Upvotes: 1

Related Questions