Dynamically Changing jQuery UI Accordion Tab Headings

If you're into using jQuery UI (and who's not?) then this is an easy way to change the heading of a jQuery accordion tab style heading to reflect user focus.

So first off, we have a nav panel and a center panel in our app pictured below. Basically when a user clicks on one of the Job Step links on the left, we are reloading pages into the center area's accordion to update content based on what the user selected using jQuery load(), but we also want to update the header of the accordion to reflect their selection in real-time. Lucky for us, this is very simple with jQuery. So for starters let's take a look at the structure of the accordion and tab elements... The accordion is basically referenced as a div and each of the tabs have a header (h3 in this case) selector to control the label text of each tab. The divs labeled stepInput and stepOutput are explicitly named for my project and I have javascript/jQuery functions that dynamically load content via cfm pages into these divs. So out of the gate our headings just read "Input" and "Output", but we want to change the headings based on what a user selects - so here's how. Basically, all we have to do is call a js function when a user clicks on one of our nav links (pictured top left in our photo above). Once that happens, we call this simple js function which uses arguments from the nav link that the user clicked on (the links were dynamically built by cflooping through a query). So that was pretty simple right? We just used a plain old $("#myElementName").text(myArgValues); to dynamically update the h3's header text for the tab. Simple, easy, effective - that's what jQuery and ColdFusion are all about!