jQuery UI Tabs With Previous and Next Buttons
- October 14th, 2010
- Send to Instapaper
- Tweet
TL;DR
Recently I had a client ask me for what was, in essence, a tabbed interface without tabs. He wanted to have the option to link directly to each one, make them bookmark-able, and the ability to navigate between them with a simple series of previous/next buttons. I immediately went to jQuery UI Tabs as my solution, but how to code those previous and next buttons?
Posted Under
There’s a lot to like about jQuery UI’s Tab solution: It’s easy to setup, uses semantic markup, and is really customizable with all of the available events and methods at your disposal. There are also other little niceties built in like bookmarking a tab or linking directly to one tab in particular by adding its id as a hash on the end of the URL.
As you may have guessed, this type of functionality isn’t built in to the tabs plugin, so a little ingenuity was in order. Here’s a little snippet of code that allows you to navigate through your tabs with a simple previous/next button (or links, images, etc).
Where ‘.next-product’ and ‘.previous-product’ are the classes of the links and ‘#myTabs’ is the name of the tab set as a whole. This is tested and working on all browsers for jQuery UI 1.8+
Enjoy! Here's a demo.