Tabable is more of a framework, rather than a fully-fledged tab stack (for which there are already many tab stacks that exist). In this stack we've worked to engineer something that is incredibly simple and lightweight. Put in any RapidWeaver theme with access to Bootstrap 3, and you'll see a simple tabbed interface. If you're comfortable with CSS, then you can write your own stylesheet for Tabable and radically transform its appearance. Tabs and tab panes can be assembled using plain text and simple HTML code tags.

We built Tabable because a number of existing tab stacks are poorly built and just ripped code straight from existing plugins, with little afterthought for solid integration within RapidWeaver. Some have serious flaws like poor responsive behaviour, no touch support, patchy theme compatibility or no print support. Quite a number of people wanted to see a basic tabs solution for ThemeFlood themes; something to emulate the 'Bootstrap Tabs' code snippet already provided. Tabable appears to be the answer many have been looking for; and fulfils several items of criteria.

Example

Here is an example of the Tabable stack in action. This was created simply by dragging and dropping a Tabable stack straight into the page and applying a rounded border. No settings, code or content were changed:
 

Uno

Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.

Dos

Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.

Tres

Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.

Cuatro

Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.

Cinco

Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.

Seis

Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.

Siete

Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.

 
We also use the Tabable stack on the ThemeFlood website, on each of the theme product pages. It provides a useful method for users to toggle between the theme information, update details and the comments box.

Setup

Setup of Tabable is achieved by editing a basic array of list items in an HTML code box. Tab panes themselves can be setup in the second HTML code box, shown in Stacks edit mode. The magic happens by giving a tab an anchor reference (href='') that corresponds with the ID (id='') of a tab. Through this linking of tabs to tab panes, you generate the tabbed interface. Clicking on a tab reveals the linked tab pane. The sample HTML code provided is pretty self explanatory and can be edited to suit your requirements. Using HTML code gives you the ability to easily edit or reorder the tabbed content at any time. If you find it easier, you can code the tab panes in a proper code editor like TextWrangler, Espresso, Sublime or Coda, and paste the content back into the Tabable stack.

Pre-requirements

This stack needs a RapidWeaver theme with Bootstrap. Nearly all themes available from ThemeFlood include Bootstrap, and have done for a while. Without Bootstrap support, you're likely to just see a garbled set of containers and no tabbed interface. If you want to use Tabable in a RapidWeaver theme without Bootstrap support, then you'll need to link to a CDN version of Bootstrap from MaxCDN. The Bootstrap website explains how to do this on the 'Getting Started' page.

Customising Tabable

These is the CSS 'skeleton' which can be picked up and used for applying custom styles to the Tabable stack. Custom CSS code can either go in the RapidWeaver Page Inspector (within the custom CSS box) or you can open the theme contents and place it in the custom.css file (which will apply the code automatically to all pages using the theme).

.TabableWrapper {
/* The container enclosing the whole Tabable stack */
}

ul.TabableTabs {
/* The tabs container, including the border line */
}

ul.TabableTabs li {
/* Each tab, including tab borders */
}

ul.TabableTabs li.active {
/* The currently active tab */
}

ul.TabableTabs li a {
/* Each tab link */
}

ul.TabableTabs li.active a {
/* The currently active tab li */
}

.TabableContent .tab-pane {
/* Each tab pane of content */
}

So if for example you wanted to colour all active tabs red with bold white links, this would be the correct CSS code to be using:

ul.TabableTabs li.active {
background: red;
}

ul.TabableTabs li.active a {
color: white;
font-weight: bold;
}
 

Contribute

If you find this stack element useful in your personal or commercial web projects; please consider making a small contribution towards ongoing support and updates. There are many different ways you can contribute to the Stacks4Stacks project, and benefits for doing so.
Bookmark or share this page
Baidu 百度
Blogger
Delicious
Digg
Facebook
Google+
LinkedIn
LiveJournal
MySpace
Одноклассники
Reddit
Renren 人人网
StumbleUpon
Tumblr
Twitter
ВКонтакте
Weibo 微博
XING
Contact Us
Email This Page
Print This Page
PS: This bookmarking and sharing popup is powered using our brilliant SocialPopup stack!

Cookies

Like a lot of websites, Stacks4Stacks uses cookies to help enhance your browsing experience and handle things like purchases. We take your privacy seriously, and welcome you to freely opt-out of nonessential cookies at any time by reviewing your preferences on this page.