Spry: Opening Specific Tabs and Panels from Another 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, with the release of Spry 1.6, it's now very easy, although 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 go to Adobe Labs and download the most recent version of the Spry framework. Unzip the download, and locate SpryURLUtils.js (in Spry 1.6, it's in the includes folder). Copy SpryURLUtils.js to the SpryAssets folder of the site you're working in. Make sure you copy the correct file, as the name is easily confused with SpryUtils.js.

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:

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.

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

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

    <script type="text/javascript" src="SpryAssets/SpryURLUtils.js"></script>

    The precise location of the <script> tag is unimportant, but I put it after the <script> and <link> tags for the tabbed panels and accordion.

  3. Add the following code block immediately after the code in the previous step:

    <script type="text/javascript"> var params = Spry.Utils.getLocationParamsAsObject(); </script>

    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.

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

    <script type="text/javascript"> <!-- var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1"); var Accordion1 = new Spry.Widget.Accordion("Accordion1"); var CollapsiblePanel1 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel1", {contentIsOpen:false}); //--> </script>

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

    var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1", {defaultTab: params.tab ? params.tab : 0}); var Accordion1 = new Spry.Widget.Accordion("Accordion1", {defaultPanel: params.panel ? params.panel: 0});

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

    var CollapsiblePanel1 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel1", {contentIsOpen: params.col1 ? true : false});

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:

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.

Books & Videos by David Powers

Beginning CSS3Dreamweaver CS6: Learn by VideoDreamweaver CS5.5: Learn by VideoDreamweaver CS5.5 for MobilePHP SolutionsDreamweaver CS5 with PHP