jQuery UI: Opening Specific Panels and Tabs from Another Page

Created: 31 August 2013

This tutorial shows how to open a specific jQuery UI panel or tab from a link on another page. It has been written in response to the removal of Spry widgets from Dreamweaver CC, but the same principles apply to any jQuery UI accordion or tabs. They don't need to have been created in Dreamweaver.

Instructions for opening a specific panel or tab in Spry widgets are on this other page.

Passing the panel or tab number in the URL

When you link from one page to another, you can pass information to the target page by adding parameters to the end of the URL. There are two ways of doing this:

The jQuery UI widgets use a JavaScript array to determine which panel or tab is open. JavaScript arrays are numbered from 0, so the second panel or tab is numbered 1. The third panel or tab is 2, and so on.

To open a specific panel or tab in a different page, pass the number through the URL as a query string. For example, to open the second panel in an accordion, add this to the end of the URL: ?panel=1. The name of the variable is unimportant, as long as you use the same name in the target page.

To open a specific panel or tab—and go straight to it—you need to combine both methods like this: ?panel=1#Accordion1. Use the ID of the jQuery UI accordion or tabs as the fragment identifier.

The query string must come before the fragment identifier. If you put them the other way round, both sets of information will be ignored.

Opening an accordion panel

These instructions assume that you use panel as the name of the variable passed in a query string through the URL.

  1. Locate the code that initializes the jQuery UI accordion. It should look similar to this:

    <script type="text/javascript"> $(function() { $( "#Accordion1" ).accordion(); }); </script>

  2. Add the following function definition inside the <script> block:

    function getParam(name) { var query = location.search.substring(1); if (query.length) { var parts = query.split('&'); for (var i = 0; i < parts.length; i++) { var pos = parts[i].indexOf('='); if (parts[i].substring(0,pos) == name) { return parts[i].substring(pos+1); } } } return 0; }

    This function takes as an argument the name of a variable passed through the query string, and returns its value. If it can't find the variable (or no query string exists), it returns 0.

  3. The jQuery UI accordion accepts a JavaScript object as an argument to set optional properties. The active property sets the default panel or tab. Amend the jQuery UI code like this:

    $(function() { var defaultPanel = parseInt(getParam('panel')); $( "#Accordion1" ).accordion( {active: defaultPanel} ); });

    This uses the getParam() function (defined in step 2) to extract the value of panel from the query string. The active property must be an integer, so parseInt() converts the value returned from getParam() before assigning it to a new variable called defaultPanel, which is then passed to the accordion constructor as the value of active.

    If there's no query string, the value is set to 0, which opens the first panel. Otherwise, the value retrieved from the query string is used.

Opening a specific tab

The technique for opening a specific tab is identical to opening a specific panel in a jQuery UI accordion. However, to avoid conflicts, I suggest using tab as the name of the variable passed through the query string. Amend the tabs initialization script like this:

$(function() { var defaultTab = parseInt(getParam('tab')); $( "#Tabs1" ).tabs( {active: defaultTab} ); });

Other Tutorials

Programming tutorials

Articles on Adobe.com

Over the years, I have contributed a large number of articles to the Adobe Developer Connection and Community publishing. Most of the articles are now in the Adobe archive because they refer to old versions of Dreamweaver. But the following articles are not Dreamweaver-specific and are still relevant.

Books & Videos by David Powers

PHP SolutionsBeginning CSS3Dreamweaver CS6: Learn by VideoDreamweaver CS5.5: Learn by VideoDreamweaver CS5.5 for MobileDreamweaver CS5 with PHP