Advanced jQuery Tabbed Box Techniques

Published January 25, 2009 by saurav.roy.

animated tabbed box interface

Last week’s article covered how to build a tabbed box interface, starting with Photoshop, and moving through XHTML and CSS to our basic jQuery functionality. If you missed it, I would highly recommend starting your reading there. This article will show you how to use jQuery to make your tabbed interface more attractive and interactive. Specifically, I’ll show you how to:

  • Make your tabs all the same height
  • Automatically rotate through your tabbed content
  • Stop the rotation when the user is interacting with the content

Equal Height Tabs

The tabbed interface we built last week was fully functional, but one nicety I’d like to add is the option to have all your tabs be the same height – a height that is determined by the content within the tabs, not any number I arbitrarily determine in advance. Read On…

Share and Enjoy !

0 0