TOPIC:

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

It is fine. My only comment is that the home page seems "busy". (A *lot* of stuff there.)

That is why I am cleaning it up and putting the accordion and the other tabs there...

Thank you... :0)

Linda

You should be able to add style="width:100%" to the outer div to get the accordion to take up the maximum width available inside the main content panel. It still won't be the same width as the main content panel (since it is inside), but it will be the maximum width available. (keeping the internal margins/padding in mind)

Yes I know that and did that, which makes it wider but not as wide...

Linda

News flash!

Here is a technique you can use to make the accordion as wide as your home page, and essentially replace the default accordion with your own. Be advised this is a very tricky, advanced technique to apply, and you will have to essentially check and maybe fix your home page content *every* time you edit/save the Website Settings module of the Admin Console.

Thanks to sandton.toastmastersclubs.org for this. They figured out the technique and are using it. As user eamonnjos noted, it is basically a sort of "hack" of our template.

Edit: I have now incorporated a way to support this technique via javascript that prevents the editor from trying to "fix" the HTML. I have updated the following template and my comments to document this. Basically, I added a little javascript to tweak the entered HTML to make it work like the sandton club technique does. This should eliminate the need to always check whether the editor monkeyed with the HTML.

Here is a modified template for this technique:

For the HTML techies, you will see that the starting </div> and ending <div> seem to be in the wrong order. This is *intentional*, since it takes advantage of the fact that the main content area is *already* an accordion with one panel in the case of no TM panels included. Thus, the above gets inserted into HTML that is already intended as source for an accordion in our template and fools the system into using the added content above as additional panels. Check the source HTML of the viewed home page with Ctrl-U to see what I mean. (just make sure to shut off the default TM panels if you use this technique)

The only problem with this approach is that the editor will try to fix your "bad HTML" for you, and it only knows about the HTML you enter in the editor box. It does not look at the HTML outside the editor box (in our template). Because of this, you will find that the editor will "fix" your HTML (for the out of order <div> tags) and your accordion may not then work with this approach. Therefore, if you use this approach, you must go back in every time you save the Website Settings module and verify that the editor has not "fixed" your HTML for you. (This is why it is "tricky" and advanced.)

Edit: I have tweaked the javascript to look for a <div> with the class name "mainUserPanel" and do the appropriate edits so that the HTML in divs in the editor content is incorporated into the accordion. This approach should also work for the Meeting Info and any custom page, also, but I have not tested that. My tweak should also prevent the editor from wanting to "fix" your HTML for you, if you use the above HTML template as a starting place.

One last comment. We take Toastmasters branding standards *seriously*, and you should, also. Until this point, the content panels in the area under the home page have always been exclusively identified with Toastmasters provided content only. If we determine that you are using this technique in a way that compromises Toastmasters branding standards adversely, I will absolutely remove the relevant content if I deem it to be a particularly flagrant violation of our Terms of Use.

bump... my last post edited

Thank you for that... I never even thought of reversing the div's...

Thank you Steve for fixing that too... Our Au Jus website looks much better now.... :0)

aujustoastmasters879.toastmastersclubs.org/

Linda

You are welcome.

One comment about accordions... there is a key reason that I ditched using accordions in the admin console. In my view, they are really only effective if the heights of each of the panels is roughly the same. Otherwise, it is very easy to lose your place in the accordions and it becomes very confusing very quickly. In the admin console, we used to have accordions there, but the heights were so different that it was very confusing to use them. That is why I ditched them and went to tabs. With tabs, you always know where the tabs are on the screen... you may have to scroll up to get to them, but it is not as easy to get confused with tabs.

I believe using accordions is one way to clean up the business of the site...

By the way, your Mindful Communicators website is Gold with 9 points... Congratulations... According to the D52 website program...

Linda

Thank you for this... I just simplified one web page... with a little extra help from an html knowledgeable club member.

CHECK IT OUT
verbalexp.toastmastersclubs.org/Club_Mem...ial_Recognition.html