Add jQuery Accordion Layout
November 11, 2009 · Print This Article
- The Mission: jQuery Tabs & Accordions
- Inserting jQuery Into Wordpress
- Add jQuery Accordion Layout
Moving on with Part III of our five part series on creating a jQuery accordion with tabs inside.
Remember that our final goal is to create a page like this one that we created for Mox & Dom. It has tabs within an accordion.
But for Part III of this series, we’re going to just get the accordion laid out so that it looks something like this:
jQuery Accordion Demo
Accordion One
Accordion One Content goes here. You can put anything you want here
Accordion Two
Accordion Two Content goes here. You can put anything you want here.
So let’s get started
There’s 2 parts to any jQuery insertion. The HTML Layout, and the jQuery calls that reference the HTML layout. Let’s start with the HTML layout first.
Here’s the exact HTML code I’m using for the demo above. Just add this into your Wordpress post or page.
1 2 3 4 5 6 7 8 9 10 11 12 | <div id="accordion-demo"> <h3><a href="#">Accordion One</a></h3> <div> <p>Accordion One Content goes here. You can put anything you want here</p> </div> <h3><a href="#">Accordion Two</a></h3> <div> <p>Accordion Two Content goes here. You can put anything you want here.</p> </div> </div> |
Yes, that is the exact code. And yes, it really is this easy!
Basically you have a div with an id of accordion (line #1), the H3 tags (line #’s 2&7) provide the accordion titles, and the href of # in the anchor tags is used by jQuery to open and close the accordion. The div right after your H3 tags is where you put your content.
See? Easy!
Now let’s take a look at the jQuery call.
Remember from the previous post that we created a file called accordion-tabs.js an put it into the /wp-content/themes/theme-name/js/ directory
Inside of the accordion-tabs.js file all we need are the following lines of code:
1 2 3 | jQuery(document).ready(function(){ jQuery('#accordion-demo').accordion(); }); |
3 Lines of jQuery code. Cool, Huh?
And if you want to get fancy, you can add some fun options too like this:
1 | jQuery('#accordion-demo').accordion({active: false, collapsible: true, autoHeight: false}); |
Checkout the jQueryUI docs for more options you can use.
At this point, you should have a working accordion that opens and closes, and displays all the hidden content, one panel at a time. As you can see, this can be a HUGE space saver on a busy website.
This concludes part III, next up is part IV of our five part series, where we will introduce you to tabs. Keep an eye out for it!
Comments
Got something to say?