Instructions for how to link to a specific panel or tab in jQuery UI accordions and tabs are on a separate page.

Chapter 8 of The Essential Guide to Dreamweaver CS3 shows how to open a specific Spry tabbed panel or accordion panel from a link on the same page, but several people have asked how to do it from a different page. The reason I didn't cover it in the book is because there wasn't a simple way of doing it at the time the book was published. However, the release of Spry 1.6 made it possible. It involves a little hand-coding, and you need to understand how to pass information through a URL.

In response to several requests, I have updated this tutorial to cover Spry collapsible panels as well.

Before you start

Opening a specific tab or panel relies on a file called SpryURLUtils.js, which was first released in Spry 1.6. It's not included among the files installed by the Spry Updater for Dreamweaver CS3, so you need to get SpryURLUtils.js (the link opens the JavaScript file in a new window or tab) from Github. Click the Raw tab in the browser window or tab that opens, and save SpryURLUtils.js to the SpryAssets folder of the site you're working in.

Passing information through a 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:

As a query string. This is a series of name/value pairs following a question mark, like this: ?variable1=value1&variable2=value2. Each name is separated from its value by an equals sign, and each pair is separated by an ampersand (if using XHTML, the ampersand needs to be embedded in the link as &amp;). There should be no spaces or special characters in the query string, although Dreamweaver will automatically urlencode them if you use the Link field in the Property inspector.

As a fragment identifier. This is the hash (or pound) symbol followed by the name of an id or anchor tag, indicating the section of the page you want the browser to go to, e.g. #thisSection.

If you want to open a specific tab or panel in a different page, you need to pass the information as a query string. For example, to open a specific accordion panel, you would add something like this to the end of the URL: ?panel=1.

To open a specific tab or panel—and go straight to it—you need to combine both methods like this: ?panel=1#thisSection.

It's important to get the order right. The query string must come before the fragment identifier. If you put them the other way round, both sets of information will be ignored.

Right, now you understand the theory, let's get coding.

Preparing the target page

I have prepared a zip file that contains a simple example of opening different combinations of panels and tabs. You can download it here. Unzip it to your Desktop, and double-click open_specific.html to see it in action. I have also included a page called target_start.html, which contains a Spry tabbed panel widget, a Spry accordion, and a Spry collapsible panel. The collapsible panel is closed when the page originally loads. Copy this page and the SpryAssets folder to a Dreamweaver site if you want to use it to practise the following steps. Alternatively, create a page of your own with tabbed panels, an accordion, and collapsible panel.

Open the page that contains the Spry widgets, and switch to Code view.

Link SpryURLUtils.js to the page by adding the following code in the <head> of the document:

This calls the getLocationParamsAsObject() method from SpryURLUtils.js, which converts all the information passed to the page through the URL into a JavaScript object called params. You can now use params to retrieve the values from the URL.

Scroll down to the bottom of the page until you come to the JavaScript code block that initializes the Spry widgets. It should look something like this:

To open a specific tab or panel, you need to pass a second argument to the TabbedPanels(), Accordion(), or CollapsiblePanel() method in this code block. As explained on page 229 of The Essential Guide to Dreamweaver CS3, this needs to be in the form of an object literal. The option properties that control the default tab or panel are named, intuitively enough, defaultTab for a tabbed panels widget, and defaultPanel for an accordion. The collapsible panel works slightly differently, so I'll deal with that later.

If the value of the tab or panel you want to open is passed through the URL, it will be a property of the params object you created in step 3. You can call the properties sent through the URL anything you like, but it makes sense to use tab for a tabbed panels and panel for an accordion. So, the selected value will be params.tab or params.panel. However, you need to set a value for defaultTab or defaultPanel even if nothing is passed through the URL.

You do this by using the JavaScript conditional (or ternary) operator like this: {defaultTab: params.tab ? params.tab : 0}. This has the effect of setting the defaultTab option to the value of params.tab if it exists, or to 0 if it doesn't. So, the code that initializes the tabbed panels and accordion should now look like this:

The collapsible panel uses an option called contentIsOpen. If the panel is closed, this is set to false. So, you need to pass a variable through the query string identifying the panel you want to open. Again, you can call it anything you like, but I'm going to use col1. It can have any value that JavaScript treats as true.

In the same way as before, you use the ternary operator to set the value like this: {contentIsOpen: params.col1 ? true : false}. If col1 is true, this opens the panel. Otherwise, the panel remains closed. So, the code that initializes the collapsible panel looks like this:

If JavaScript is like Klingon to you, just follow the preceding steps, and everything should work OK.

That finishes the changes to the target page. There is no need to create named anchors for the tabbed panels or accordion, as you can use the id Dreamweaver automatically assigns to each set of tabbed panels or accordion.

Creating the links from the other page

All that's necessary now is to create a link to the target page using the combination of query string and fragment identifier, as described in "Passing information through a URL" earlier. There are two important things to remember:

The query string must precede the fragment identifier in the link.

JavaScript counts from 0, so the second tab or panel is identified as 1, not 2.

So, to create a link to open target.html with the second tab of TabbedPanels1 open, the URL looks like this: target.html?tab=1#TabbedPanels1.

To open target.html with both the second tab and the second accordion panel open, while positioning the browser at the top of the tabbed panels, the link looks like this: target.html?tab=1&panel=1#TabbedPanels1.

To open target.html with the collapsible panel open and the browser positioned at the top of the panel, the link looks like this: target.html?col1=open#CollapsiblePanel1.

You can have any combination you want; the code in the previous section automatically takes care of it all (assuming, of course, that JavaScript is enabled in the user's browser). Study open_specific.html in the example zip to see some of the possibilities.