Welcome, Guest
Username: Password: Remember me
1. The "search..." box above searches the Docs & Forum Posts. The "Search" tab above just searches the Forum Posts. :side:
Please use these to search for your issue *before* creating a new message topic, as your issue may have been previously solved.
2. Please put your Club # and Club Web Address in your Forum Signature (best) OR in each post to get faster support from us.
Click here to edit your signature at the bottom of the Profile Information tab.
3. Our user and admin docs are available at: https://support.toastmastersclubs.org/doc "There's a doc for that!" ;)
3a. There is a New "Opt In" Feature for newly added members. It also explains the strikethrough member information. Click Here to View the Post
4. When posting a New Topic , please include all relevant details and be specific. When did your issue 1st occur? What operating system, browser, & browser version are you using? Did you refresh your browser cache? Are your cookies enabled? Lastly, a screen shot is often helpful.
5. Please abide by the Terms of Use . We are volunteers contributing our spare time. We are happy to assist you, so long as you are respectful and courteous.
6. We are always looking for new FreeToastHost Ambassadors to join our ranks and support fellow Toastmasters in their use of the FreeToastHost website system. If you are familiar with the system and have some interest, send a Private Message to RogerM.
  • Page:
  • 1

TOPIC: How to put tabs in your content.

How to put tabs in your content. 4 years 3 months ago #35831

  • SteveTheTechie
  • SteveTheTechie's Avatar Topic Author
  • Away
  • FreeToastHost Developer
  • FreeToastHost Developer
  • Posts: 10467
  • Karma: 145
  • Thank you received: 2833
(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...
<div id="myTabs" class="userTabs">
	<ul class="tab-list">
 		<li><a href="#tab1">My First Tab</a></li>
 		<li><a href="#tab2">My Second Tab</a></li>
 		<li><a href="#tab3">My Third Tab</a></li>
 	</ul>

	<div id="tab1">
		This is some content.
	</div>

	<div id="tab2">
		This is some more content.
	</div>

	<div id="tab3">
		This is even more content.
	</div>
</div>

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!
Last Edit: by SteveTheTechie.
The topic has been locked.

How to put tabs in your content. 4 years 3 months ago #35833

  • SteveTheTechie
  • SteveTheTechie's Avatar Topic Author
  • Away
  • FreeToastHost Developer
  • FreeToastHost Developer
  • Posts: 10467
  • Karma: 145
  • Thank you received: 2833
If anyone wants me to post on setting up an accordion I can do that also.
The following user(s) said Thank You: AnitaCCC, LindaMann
The topic has been locked.

How to put tabs in your content. 4 years 2 months ago #36707

  • morrowcoteacher
  • morrowcoteacher's Avatar
  • Offline
  • FTH Expert Poster
  • FTH Expert Poster
  • Posts: 151
  • Thank you received: 40
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</a></div>

<div id="154ab2"> <a href=" 154.toastmastersclubs.org/CONFERENCES.html ">CONFERENCES</a></div>

<div id="154tab3">  <a href=" tmd9.org ">DISTRICT 9</a></div>
</div>
<script>jQuery("#154mytabs").tabs()</script>



thanks

Darlene Marquardt, vppr
154.toastmastersclubs.org
Serving Pendleton Club 154 as
VP Education
154.toastmastersclubs.org/

Faculty Club
4506013.toastmastersclubs.org/

Vineyard Voices Toastmasters
0529804.toastmastersclubs.org/

Darlene Marquardt - DTM



toastmasterdarlenesue at gmail dot com
The topic has been locked.

How to put tabs in your content. 4 years 2 months ago #36708

  • SteveTheTechie
  • SteveTheTechie's Avatar Topic Author
  • Away
  • FreeToastHost Developer
  • FreeToastHost Developer
  • Posts: 10467
  • Karma: 145
  • Thank you received: 2833
Ok, the thing is that you are trying to do this a bit differently than tabs are usually used for.

It looks like you are trying to use the tabs as a sort of menu, rather than just content separators/bookmarks, which is actually how they are intended to be used. Thus, the divs at the bottom usually contain the actual content to be divided up rather than links to the content.

The other thing is that the following appears to be misspelled: <div id="154ab2">

Tabs are very picky... they won't work with misspellings. I get tripped up with them all the time.

Also, I am going to edit my original post to show my class name for rounded tabs... so take another look in a few minutes.
Last Edit: by SteveTheTechie.
The topic has been locked.

How to put tabs in your content. 3 years 9 months ago #41987

  • AnitaCCC
  • AnitaCCC's Avatar
  • Offline
  • FTH Newbie Poster
  • FTH Newbie Poster
  • Webmaster
  • Posts: 17
  • Thank you received: 2
I saw this on a Club's website used for their meeting minutes. They had the last 6 years of meeting minutes! :ohmy:

No more emailing or photocopying meeting minutes! All the club secretaries should know about this!
:cheer:
Anita, Webmaster for Confident Communicators Club of Washington Township and Romeo, Michigan, USA #1196053
www.confidentcommunicatorsclub.com
The topic has been locked.

How to put tabs in your content. 3 years 9 months ago #41991

  • SteveTheTechie
  • SteveTheTechie's Avatar Topic Author
  • Away
  • FreeToastHost Developer
  • FreeToastHost Developer
  • Posts: 10467
  • Karma: 145
  • Thank you received: 2833
Thanks, In FTH 2.20, I have made this even easier, since I am now handling the script part for users.

I have edited the above to add the class name userTabs, and remove the script tags, since they are no longer needed.

The FTH 2.20 will automatically convert any HTML section with the userTabs class to jQuery UI tabs.

There is also the analogous with userAccordion and userMenu classes.
The following user(s) said Thank You: LindaMann
The topic has been locked.

How to put tabs in your content. 3 years 3 months ago #49854

  • SteveTheTechie
  • SteveTheTechie's Avatar Topic Author
  • Away
  • FreeToastHost Developer
  • FreeToastHost Developer
  • Posts: 10467
  • Karma: 145
  • Thank you received: 2833
Here is an example of a club website that is using tabs on their home page: 1241.toastmastersclubs.org/
The following user(s) said Thank You: LindaMann
The topic has been locked.

How to put tabs in your content. 3 years 2 months ago #51421

  • LindaMann
  • LindaMann's Avatar
  • Offline
  • FreeToastHost Ambassador
  • FreeToastHost Ambassador
  • Posts: 679
  • Karma: 7
  • Thank you received: 155
Hello Steve;

What is the code for the menus at the bottom of the screen... Here is an example of what I mean...






Linda
Attachments:
The topic has been locked.

How to put tabs in your content. 3 years 2 months ago #51423

  • SteveTheTechie
  • SteveTheTechie's Avatar Topic Author
  • Away
  • FreeToastHost Developer
  • FreeToastHost Developer
  • Posts: 10467
  • Karma: 145
  • Thank you received: 2833
Linda,

Those are not menus, those are accordion controls. Please see here: support.toastmastersclubs.org/6-tips-and...n-your-content#45428
The following user(s) said Thank You: LindaMann
The topic has been locked.

How to put tabs in your content. 3 years 2 months ago #51427

  • LindaMann
  • LindaMann's Avatar
  • Offline
  • FreeToastHost Ambassador
  • FreeToastHost Ambassador
  • Posts: 679
  • Karma: 7
  • Thank you received: 155
Actually you're right and I knew that... Never do things when you are tired...

Linda
The topic has been locked.

How to put tabs in your content. 1 year 8 months ago #60070

  • deej0324
  • deej0324's Avatar
  • Offline
  • FTH Newbie Poster
  • FTH Newbie Poster
  • Posts: 3
  • Thank you received: 0
I have figured out how to add tabs to a page called "Club Photos" on the main menu. However, I cannot figure out how to get specific photos to the specific tabs. They keep all showing up on all 3 tabs. What am I missing?

Thanks!

Dawna
Club 1468 www.kvtm.toastmastersclubs.org
The topic has been locked.

How to put tabs in your content. 1 year 8 months ago #60074

  • LindaMann
  • LindaMann's Avatar
  • Offline
  • FreeToastHost Ambassador
  • FreeToastHost Ambassador
  • Posts: 679
  • Karma: 7
  • Thank you received: 155
It sounds like you are missing the closing div code...
The topic has been locked.

How to put tabs in your content. 1 year 2 months ago #63806

  • Evab
  • Evab's Avatar
  • Offline
  • FTH Newbie Poster
  • FTH Newbie Poster
  • Posts: 6
  • Thank you received: 1
I have copied the code exactly, however I cannot get the 4th and 5th tab to work. What I'm I doing wrong? Please help.

<div class="userTabs" id="Tabs">
<ul class="tab-list">
<li><a href="#6261tab1">2017 International Eval</a></li>
<li><a href="#6261tab2">2017 Events</a></li>
<li><a href="#6261tab3">Black History</a></li>
<li><a href="#6261tab4">2016 Events</a></li>
<li><a href="#6261tab5">Past Events</a></li>
</ul>

<div id="6261tab1">
<p style="text-align: center;"> </p>

<p style="text-align: center;"><iframe allowfullscreen="true" frameborder="0" height="366" mozallowfullscreen="true" src=" docs.google.com/presentation/d/1HT2UmDpb...rue&delayms=3000 " webkitallowfullscreen="true" width="600"></iframe></p>
</div>

<div id="6261tab2">
<p style="text-align: center;"><iframe allowfullscreen="true" frameborder="0" height="366" mozallowfullscreen="true" src=" docs.google.com/presentation/d/1ygKFWGYZ...rue&delayms=3000 " webkitallowfullscreen="true" width="600"></iframe></p>
</div>

<div id="6261tab3">
<p style="text-align: center;"><iframe allowfullscreen="true" frameborder="0" height="366" mozallowfullscreen="true" src=" docs.google.com/presentation/d/1evKHrFvp...rue&delayms=3000 " webkitallowfullscreen="true" width="600"></iframe></p>

<div id="6261tab4">
<p style="text-align: center;"><iframe allowfullscreen="true" frameborder="0" height="366" mozallowfullscreen="true" src=" docs.google.com/presentation/d/1F0Ttx4e7...rue&delayms=3000 " webkitallowfullscreen="true" width="600"></iframe></p>

<div id="6261tab5">
<p style="text-align: center;"><iframe allowfullscreen="true" frameborder="0" height="366" mozallowfullscreen="true" src=" docs.google.com/presentation/d/1vdKmZ1vP...rue&delayms=3000 " webkitallowfullscreen="true" width="600"></iframe></p>
</div>
</div>
</div>
</div>
The topic has been locked.

How to put tabs in your content. 1 year 2 months ago #63807

  • Brian
  • Brian's Avatar
  • Offline
  • Administrator
  • Administrator
  • Posts: 7164
  • Karma: 110
  • Thank you received: 2131
Fix your code you have a bunch of div at the bottom show be one closing each tab.
The following user(s) said Thank You: LindaMann, Evab
Thank you

Brian McDonald DTM
Lead Freetoasthost Support
support.toastmastersclubs.org

Cataraqui Valley Toastmasters
www.catval.com
Club #9560

Past District Director District 61 for 2016-2017
Serving Eastern Ontario, Quebec, and Northern New York
www.tm61.org
The topic has been locked.

How to put tabs in your content. 1 year 2 months ago #63808

  • Evab
  • Evab's Avatar
  • Offline
  • FTH Newbie Poster
  • FTH Newbie Poster
  • Posts: 6
  • Thank you received: 1
Thank you so much it works Yippy I can sleep now :)
The topic has been locked.

How to put tabs in your content. 1 year 2 months ago #63809

  • SteveTheTechie
  • SteveTheTechie's Avatar Topic Author
  • Away
  • FreeToastHost Developer
  • FreeToastHost Developer
  • Posts: 10467
  • Karma: 145
  • Thank you received: 2833

Evab wrote: Thank you so much it works Yippy I can sleep now :)


Care to share so we can admire your work? B)

Also please put your club number in your forum signature for fastest forum support response. See the CLICK HERE link for that in my signature below to access your forum profile to set it.
The following user(s) said Thank You: LindaMann
Last Edit: by SteveTheTechie.
The topic has been locked.

How to put tabs in your content. 1 year 2 months ago #63810

  • Evab
  • Evab's Avatar
  • Offline
  • FTH Newbie Poster
  • FTH Newbie Poster
  • Posts: 6
  • Thank you received: 1
Sure
commerce.toastmastersclubs.org/Club_Pictures.html

Hope you like.

I was able to create slide show by watching this video, hope it helps others who do not want to use Flickr
The topic has been locked.

How to put tabs in your content. 1 year 2 months ago #63811

  • SteveTheTechie
  • SteveTheTechie's Avatar Topic Author
  • Away
  • FreeToastHost Developer
  • FreeToastHost Developer
  • Posts: 10467
  • Karma: 145
  • Thank you received: 2833
Nice! B)

BTW, if you want, you can color in the white band around the iframes if you put something like the following on the divs:
style="background-color:lightblue;"

Put whatever color you want there instead of lightblue:
www.w3schools.com/colors/colors_names.asp
The following user(s) said Thank You: LindaMann, Evab
Last Edit: by SteveTheTechie.
The topic has been locked.

How to put tabs in your content. 1 year 2 months ago #63812

  • Evab
  • Evab's Avatar
  • Offline
  • FTH Newbie Poster
  • FTH Newbie Poster
  • Posts: 6
  • Thank you received: 1
Nice I am excited love colors just added the lightblue I am going to see the other colors to use from the website you posted. Thank you :)
The following user(s) said Thank You: LindaMann
The topic has been locked.

How to put tabs in your content. 10 months 3 weeks ago #66282

  • Latasha
  • Latasha's Avatar
  • Offline
  • FTH Newbie Poster
  • FTH Newbie Poster
  • Posts: 3
  • Thank you received: 0
You rock! This is awesome and perfect for what I am wanting to do. I will try to create some tabs on our page and let you know how it goes!
The topic has been locked.

How to put tabs in your content. 9 months 3 weeks ago #66661

  • dalmo
  • dalmo's Avatar
  • Offline
  • FTH Newbie Poster
  • FTH Newbie Poster
  • Posts: 4
  • Karma: 1
  • Thank you received: 3
This is an excellent way to make long pages easier to read. Check it out!

http://leadershiplambda.toastmastersclubs.org/CLUB_AWARDS.html
The following user(s) said Thank You: SteveTheTechie, NSB
Dalmo Mendonca, ACB, CL
Leadership Lambda - leadershiplambda.toastmastersclubs.org
Talking Heads of Stuart - talkingheadsofstuart.toastmastersclubs.org

www.hiredalmo.com
The topic has been locked.
  • Page:
  • 1
Moderators: SteveTheTechieGeorgeMarshallPam
Powered by Kunena Forum