As an alternative to templating jQuery into your theme, you might be looking for a WordPress plugin that handles tabs, accordian or toggles that can work out of the box…
thethe-Tabs and Accordians
With the ability to theme the boxes with different colors, you’ll have your tabs, accordian menus and toggles popping with jQuery in no time flat! Driven by easy to use shortcodes…with a little magic…you can have sidebars with jQuery pizazz…
jQuery Tab, Accordian and Toggle Options for this WordPress Plugin
Tabs provide the traditional tabbed browsing experience, fitting into your css content area with the number of tab boxes you specify.
- Accordians expand one box and close the other.
- Toggles keep one box open and let you further expand the others.
- Accordians open vertically or horizontally (downwards/crosswise)
- Styles are based on jQuery UI ThemeRoller
- You can set which box in the lineup opens first!
- Present content areas with tiers of information in a friendly fashion
- No theme color browser. You have look at the ThemeRoller site link above or try.
- No inherent widget support. Creativity required to place in sidebars. (easy to put in post)
Another Plugin (Works w/Above as Well)
jQuery Collapse o Matic handles vertical toggles with a basic styling set and easy to use shortcodes. It works nicely along side the above plugin…Use it in a nice 3 column…with Collapse o Matic on the left and thethe-Tabs and Accordians on the right…this will give a nice multiple style jQuery pop…with the right column sort of flying out…
There you go…you are now ready to “Throw Some G’s on That Site…”
Downloads on the Plugin Repository
Also Find Supporting Info on the Developer Pages
- TheThe Fly – Tabs and Accordians Developer Page
- Insert Tabs and Accordians Without Plugin (or Hybrid)
- Tabs and Accordians Support Forum
- Collapse o Matic Developer Page
Screencaps and Shortcodes
Here is a quick reference for the shortcodes that were used to create these.
So now we’ve sort of covered what it is…most familiar with jQuery and WordPress Plugins will understand the power.
Let’s check out how to use it!
SHORTCODE SYNTAX -MUST- BE CORRECT
IMPORTANT NOTE TO USE THE CODE IN THE WP PANEL PLUGIN SETTINGS AND MAKE SURE TO COPY IT, THEN CHECK THE SHORTCODE SYNTAX TWICE, A SMALL ERROR IN THE SHORTCODE WILL CAUSE DISPLAY ISSUES – You’ll see in the examples below, when stacking all these widgets atop one another, confused syntax can cause confused display.
Traditional Tabs and Horizontal Slider
The below screencap shows two separate effects, Tabs and the Horizontal Accordian
The Traditional Tabs
<code>[tabs title=”” active=1 event=”click”][tab title=”First tab title”]HERE IS WHERE THE CONTENT GOES[/tab] [tab title=”Second tab title”]Second tab content[/tab][/tabs]</code>
The Horizontal Accordian
<code>[haccordions title=”” width=500 height=320 hwidth=28 speed=200 active=1] [haccordion title=”Fist title”]First accordion content[/haccordion] [haccordion title=”Second title”]Second accordion content[/haccordion][haccordion title=”Third title”]Third accordion content[/haccordion][/haccordions]</code>
Accordian Set to Open Panel 3
The below example shows sized for a smaller sidebar, but you can use it with a greater width for your design.
<code>[accordions title=”” active=1 event=”click” disabled=false autoheight=true] [accordion title=”Accordion 1 Title”]First accordion section content[/accordion] [accordion title=”Accordion 2 Title”]Second accordion section content[/accordion][accordion title=”Accordion 3 Title”]Third accordion section content[/accordion][/accordions]</code>
Toggle Set to Open on Panel 1
This example is set to two panels. You can have as many as you need.
<code>[toggles title=”” active=1 speed=500] [toggle title=”Pane 1″]First toggle text[/toggle] [toggle title=”Pane 2″]Second toggle text[/toggle] [/toggles]</code>
Collapse o Matic
This shows 3 expandable panels, each entered separately. You can use as many or as few as you want.
<code>[expand title=”Displayed Title Goes Here”]Hidden content goes here[/expand][expand title=”Displayed Title Goes Here”]Hidden content goes here[/expand][expand title=”Displayed Title Goes Here”]Hidden content goes here[/expand]</code>
Make Things More Exciting for Everyone!
Being able to navigation content in a more effective fashion saves everyone time…rather than having to bounce between multiple pages to absorb content…some sites can’t avoid this…but for some nice effects or explanations…here you go!
Tested with 3.2.1, Both versions in repository as compatible. Photo credit to Sabrina’s Stash for Blue Flash