Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    text
    copied!<p>This turns out to be a bit trickier than it seems, as the <a href="http://docs.jquery.com/UI/Accordion" rel="nofollow">Accordion API docs</a> are not all that easy to follow, and the <code>activate()</code> function doesn't appear to work as advertised.</p> <p>From your question, it sounds like you want to open an accordion section by referencing a div ID. This isn't possible out of the box; you can only identify sections using a 0-based index (e.g. 0 = first section, 1 = second section, etc.).</p> <p>Having said that, this approach will work:</p> <p>Define the links like this:</p> <pre><code>&lt;a href="10387904_Accordion_link_2.html?openAccordionId=0"&gt;Open first item&lt;/a&gt; &lt;a href="10387904_Accordion_link_2.html?openAccordionId=1"&gt;Open second item&lt;/a&gt; &lt;a href="10387904_Accordion_link_2.html?openAccordionId=2"&gt;Open third item&lt;/a&gt; </code></pre> <p>On the page containing the accordion, use the following code to extract the ID from the query string and initialise the accordion with the relevant section activated:</p> <pre><code>// Using the parseQueryString extension from // http://paulgueller.com/2011/04/26/parse-the-querystring-with-jquery/ $.extend({ parseQuerystring: function () { var nvpair = {}; var qs = window.location.search.replace('?', ''); var pairs = qs.split('&amp;'); $.each(pairs, function (i, v) { var pair = v.split('='); nvpair[pair[0]] = pair[1]; }); return nvpair; } }); // Get the index of the section we want to open from the querystring. var openAccordionId = parseInt($.parseQuerystring()["openAccordionId"]); // Initialise the accordion with the active section defined. var accordion = $("#accordion").accordion({ active: openAccordionId }); // Note: for some reason, the following does not work: // var accordion = $("#accordion").accordion(); // accordion.activate(openAccordionId); </code></pre>
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload