How to put an accordion in your content...

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 a real, functioning accordion in 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 accordion...

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 accordion sections (called "panels").

There are three parts to this... (must be created in Source View for best results)
1. An overall enclosing <div> block. Use the "userAccordion" class as indicated to make FTH automatically convert this to an accordion--FTH does the script part, then. You can have an id specified (e.g. like "myAccordion"), 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 not necessary. FTH will handle setting this up as long as you correctly use the "userAccordion" class name.

2. h3 blocks. (heading text) You need one of these for each accordion panel, like I am showing above. These define the text that is shown on the bar that opens a panel.

3. Inner div blocks containing the actual content for each panel. This content can be anything even pictures. Remember that the h3 blocks must each be paired up with a corresponding inner div block.

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

Do not use the same ID as I used above--make up your own and append your club number it to make them distinct from those used in FTH. (otherwise you can create name clash problems)

If you view the above in normal editor WYSIWYG view, you will just see blocks of text with headings. (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 accordion.

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

Thank you... I knew it was simple but a little different from doing it in a regular web page...

Linda

Hello Steve;

I got it to work, but what is the width of the other one's? I would like the one's I created to go out as far...

Here is my site: Au Jus Toastmasters

Linda

Well, because it is contained inside the main content area, it will never be wider than the main content area - minus the padding for the main content area. You can adjust the amount of padding with the main margin adjustment setting (appearance tab), but that adjustment affects *all* user content shown in the main content panel. (I did it that way to enforce some consistency.) So... if you change that, you should take a look at your other pages for any side effects. As you are obviously very proficient, killing the margins/padding might be a good approach for you, since you can then set margins/padding in your content as you wish with a "wrapper div".

The accordions at the bottom are set up by my code and can only be displayed or hidden. It has never been the intention by the original FTH developer or myself to allow the TI-provided content of the bottom accordion to be replaced. Therefore, there is no editor for that content... it is essentially static content, by design.

Hello there!

I have tried to put in a border to enlarge the width and I even put the width at 100%, and the width still has not expanded.... How do I make it the length of the accordians already there? Or is that possible without JavaScript?

Here is my site so far: Au Jus Toastmasters

Linda

Alright, thank you for your reply...

What do you think of what I did? Have you seen my site since I made the changes?

Linda