Use an unordered list for your tabs, and follow up with the “tab_container” container right below it. Make note that each list item (tabs) has an attribute of “href” that matches the ID of the “.tab_content” div. This will be very important once we have jQuery pull off the actions.
Content Tabs have become more popular lately with more and more websites and blogs using them to show more content in lesser space. Today I am going to show you how to create content tabs with nice flipping effect. For this, you will need the QuickFlip jQuery Plugin by Jon Raasch and of course, the latest version of the incredible jQuery library.
This tutorial, we will be making a jQuery Sliding Tab Menu for sidebar. Previously, I made a tutorial about jQuery Tabbed Interface / Tabbed Structure Menu, if you have not read it yet, check it out. I’m using it for my sidebar at the moment. The differences between both tab menus are, the sliding direction and this time, we are using a little bit different HTML structure and massive change in jQuery script.
Another feature that is often added to Web 2.0 sites is tabbed content. I’m not talking about tabbed navigation. Tabbed content is when different chunks of HTML are shown depending on what tab is clicked.