How to put an accordion in your content...

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[strike], 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[/strike].

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:

[strike]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.)[/strike]

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