How to put tabs in your content.

(Revised 11/29/2014 for FTH 2.20)
We use the jQuery code library for FreeToastHost, but in reality any club can make use of some of its features.

Here is how to set up real, functioning tabs on your home page, meeting info page, or custom page:

First of all copy the following to the clipboard to use as a template for your tabs...

Please copy the above to an empty custom web page in Source View, then you can test it out until you get it working the way you want. The above is set up for 3 tabs.

There are three parts to this... (must be created in Source View for best results)
1. An overall enclosing <div> block. Use the "userTabs" class as indicated to make FTH automatically convert this to tabs--FTH does the script part, then. You can have an id specified (e.g. like "myTabs"), but it is optional. (If you use an id then put your club number on end to make sure you do not clash with FTH ids.) Including script text is no longer necessary. FTH will handle setting this up as long as you correctly use the "userTabs" class name.

2. A ul block. (unordered list) Use the class="tab-list" piece for rounded tabs like in FTH2. Each li line in the ul block represents one tab.... one li line per tab. The hrefs in the <a tags in each li line must match a corresponding id in one of the inner div blocks.

3. Inner div blocks containing the actual content for each tab. This content can be anything even pictures. The ids of these inner div blocks must match the li lines in the ul block.

Again, no JavaScript is needed for this if you use the "userTabs" class name as indicated above. This is an FTH 2.20 advanced feature.

Do not use the same tab IDs as I used above--make up your own and append your club number them to make them distinct from those used in FTH. (otherwise you can create problems) Make sure you pay close attention to where the "#" signs go. That is what I goof up on most frequently with tabs.

If you view the above in normal editor view, you will see a bulleted list and your tab content. (It helps to toggle on the block indicators in ckeditor in normal view.) You have to save your page and exit the Admin Console to see the actual tabs.

Enjoy! Please share your webpage address on here so that we can admire your work!

If anyone wants me to post on setting up an accordion I can do that also.

I'm not doing something right

my tabs show up but they won't link to where I want them to go

and then I keep getting a list below the tabs... all I want are the tabs and of course for them to work.

here is the code I put in:

<div id="154mytabs">
<ul>
<li><a href="#154tab1">NEWSLETTERS</a></li>
<li><a href="#154tab2">CONFERENCES</a></li>
<li><a href="#154tab3">DISTRICT 9</a></li>
</ul>

<div id="154tab1"> <a href=" 154.toastmastersclubs.org/club_154_Newsletters.html ">NEWSLETTERS