Linking to specific panel or tab in jQuery UI widgets

Dreamweaver CC has replaced its Spry widgets, such as accordion and tabbed panels, with jQuery UI equivalents. This means that one of my most requested tutorials on linking to a specific panel or tab needed to be rewritten for jQuery UI. The jQuery UI version is here. If you’re still using Spry, the Spry version is still online.

Unlike Spry, jQuery doesn’t have a built-in method for extracting the values from a URL, so I have created a simple JavaScript function that takes as its argument the name of a variable passed through a query string and returns its value. All you need to do is to copy the function definition, and make a couple of minor changes to the code that initializes the accordion or tabs.

Although I’ve written this mainly for Dreamweaver users, the code is not Dreamweaver-specific. It works with any jQuery UI accordion or tabs widget.

This entry was posted in AJAX/JavaScript, Dreamweaver. Bookmark the permalink.

4 Responses to Linking to specific panel or tab in jQuery UI widgets

  1. Phil says:

    This is obviously the wrong place for questions, and I am sorry for the inappropriate comment but there is no other way to contact Mr Powers. I’ve been following the DW CS5 tutorials on the Adobe site which I was able to keep up with and enjoying, so I decided to move onto DW CS5 with PHP ‘training from the source’ book and stumbled to a complete halt when it progressed into Zend modules, and the step by step instructions printed in the book didn’t match the code in the included completed files. Why on earth would a teacher want to confuse their students in such a way?
    Nobody needs to answer, I know I am using outdated software (it’s all I can afford) and I know the book is outdated – The Adobe tutorials even more so, but at least I can follow those and they work. I have to find another way to learn PHP within the DW CS5 environment. Argh!!

  2. David Powers says:

    I’m surprised you say that the instructions in the book don’t match the code in the completed files. The book was written by copying and pasting from the files into the steo-by-step instructions.

    The reason that DW CS5 with PHP: Training from the Source doesn’t use the built-in server behaviors is because I knew when I was writing the book that the server behaviors were destined for the scrapheap (although I wasn’t allowed to say so). In fact, the server behaviors have now been removed from Dreamweaver because PHP (not Adobe) has deprecated the code they use. If you want to continue using the Dreamweaver server behaviors, grab hold of my Essential Guide to Dreamwweaver CS4. The PHP section (about 500 pages) should work perfectly with CS5. However, I recommend avoiding the server behaviors because they will eventually stop working. Grab hold of a non-Dreamweaver specific book, such as my PHP Solutions, 2nd edition. I believe Larry Ullman’s beginner books are very good, too.

  3. Phil says:

    Thank you for your reply with further reading recommendations I will certainly give them a go, I believe I may have bitten off more than I can chew with this PHP stuff. I have set myself a goal to learn & build a dynamic DVD rental website in a year. 12 months to figure it out and get it running. I know some stuff about html & css – however the last website I developed & ran was in 2004! so that’s my problem (I am very out of date).

    However there is a really confusing problem with lesson 7 in the PHP book, the working examples are very unclear for a beginner to follow. Although that’s probably due to my level of experience, after following your online tutorials and the other lessons in the book (apart from the wordpress one) I am learning, gradually and with a certain amount of frustration, I am beginning to understand where I am going. So thank you for providing the tutorials, I am going to head over to Amazon right now 🙂

  4. David Powers says:

    Some people take to PHP quickly. Others need more time. If you learn better by watching things being done, you might find my Introducing PHP course on gives you a solid understanding of the basic principles. Good luck.