CODEWITHSUNDEEP
javascriptjqueryhtmlaccordionjquery-ui-accordion
meganlouise
meganlouise

Reputation: 35

How can I open a JQuery Accordian UI tab from an external link?

HTML

<div id="accordion">


<h3>FIRST SECTION</h3>
<div>
Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus
</div>

<h3>SECOND SECTION</h3>
<div>
Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus
</div>

<h3>THIRD SECTION</h3>
<div>
Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus
</div>

</div>

JS

jQuery(document).ready(function($) {
var $accordion = $("#accordion");

$accordion.accordion();

$(".opener").on("click", function () {

var $this = $(this),
    toOpen = $this.data("panel");
    $accordion.accordion("option", "active", toOpen);

    return false;
});

And here is the link: 

<a class="opener" data-panel="2" href="/new-page">THIRD SECTION</a>

This was a solution found here: http://jsfiddle.net/VZ3T5/1/ However it obviously doesn't work when the link is coming from a separate page as the function returns false.

Does anyone know of a way to redirect to the new page, THEN accomplish the same function? I've been searching for an answer to this all over the place but nothing has worked so far. Thanks

Upvotes: 0

Views: 45

Answers (1)

MikaAK
MikaAK

Reputation: 2364

What you can do is have a hash or query parameter in the URL then you can call 

var setPanelToHashIndex = function() {
  // Alternatively for query you can use jQuery.params('panelIndex') or similar
  var hashIndex = +window.location.hash.replace('#', '')

  jQuery('#accordion').accordion('option', 'active', hashIndex)
}

then for doing this on page load just use document.ready

or jQuery(setPanelToHashIndex)

Upvotes: 1

Related Questions