Using jQuery Accordion to Alter Content Outside of the Accordion
Today I was working on some of my content over at TC Web Development and needed to add some functionality to one of my pages that would update page content based on what content was visible in a jQuery accordion. After some tinkering I was able to figure out a way to do this and figured I would share as I did not find any other information on the web that achieved the desired effect.
Next you will want to add a div to your page that will be the target for content. Let’s give that div and id of content. Next you will need a div for the accordion. I will call the example div’s id accordion for simplicity. Within the div for the accordion we will use jQuery’s sample code. As I want to change content based on the content of each accordion panel, I will give each starting paragraph within the panel an id (p tag). You can use CSS to position these elements as you would like to. You can see the code at jQuery Accordion to get an idea of how the accordion is setup, but the following is a good idea of how your code will look.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39
<div id="content"></div> <div id="accordion"> <h3><a href="#">Section 1</a></h3> <div> <p id="one"> Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate. </p> </div> <h3><a href="#">Section 2</a></h3> <div> <p id="two"> Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In suscipit faucibus urna. </p> </div> <h3><a href="#">Section 3</a></h3> <div> <p id="three"> Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis. Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui. </p> </div> <h3><a href="#">Section 4</a></h3> <div> <p id="four"> Cras dictum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia mauris vel est. </p> </div> </div>
Next we will need to add some code to make the accordion behave as an accordion. Assuming you have included your jQuery files correctly, this is quite simple and will look something like this.
1 2 3 4 5
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17
- Setting up content in PHP (lines 2-5)
From here things are fairly simple. We will simply add a funtion that fires on the change event of the accordion. This function will grab the id of the active accordion content after the accordion changes and use it to determine what content to put in the the content div. The code will look something like this.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
- We place the change event and function in a variable(line 9-12)
- We use ui.newContent.attr(“id”) to get the id of the new content. This id corresponds to the hash table key and is used to change the html of the content div(line 11)
That’s it, your accordion will now update the content div based on what accordion panel is selected. To see this in practical action, please feel free to check out TC Web Development’s Portfolio Page which uses it to change an image within the page based on what is selected in the accordion.