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!" ;)
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 an accordion in your content...

How to put an accordion in your content... 3 years 4 months ago #45428

  • SteveTheTechie
  • SteveTheTechie's Avatar Topic Author
  • Away
  • FreeToastHost Developer
  • FreeToastHost Developer
  • Posts: 9967
  • Karma: 137
  • Thank you received: 2603
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...
<div id="myAccordion" class="userAccordion">
	<h3>Section 1</h3>
	<div>
		This is some content.
	</div>

	<h3>Section 2</h3>
	<div>
		This is some more content.
	</div>

	<h3>Section 3</h3>
	<div>
		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 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!
The following user(s) said Thank You: Jane Atkinson, LindaMann

Please Log in or Create an account to join the conversation.

Steve James, DTM
FreeToastHost 2 Lead System Developer B)
District 52 Pathways Chief Ambassador / Guide
www.linkedin.com/in/sejames
Officer Emeritus
Mindful Communicators - Club 1966, Presidents Distinguished Since 2008
www.mindfulcommunicators.org

CLICK HERE to edit your "signature" for forum messages (at the bottom of the "Profile Information" tab). Please include your club # there.

Digital Tip Jar (optional) :thumbsup:
Last Edit: by SteveTheTechie.

How to put an accordion in your content... 2 years 11 months ago #51426

  • LindaMann
  • LindaMann's Avatar
  • Offline
  • FreeToastHost Ambassador
  • FreeToastHost Ambassador
  • Posts: 652
  • Karma: 7
  • Thank you received: 149
Thank you... I knew it was simple but a little different from doing it in a regular web page...

Linda :)

Please Log in or Create an account to join the conversation.

How to put an accordion in your content... 2 years 11 months ago #51428

  • LindaMann
  • LindaMann's Avatar
  • Offline
  • FreeToastHost Ambassador
  • FreeToastHost Ambassador
  • Posts: 652
  • Karma: 7
  • Thank you received: 149
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

Please Log in or Create an account to join the conversation.

How to put an accordion in your content... 2 years 11 months ago #51437

  • SteveTheTechie
  • SteveTheTechie's Avatar Topic Author
  • Away
  • FreeToastHost Developer
  • FreeToastHost Developer
  • Posts: 9967
  • Karma: 137
  • Thank you received: 2603
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.
The following user(s) said Thank You: LindaMann

Please Log in or Create an account to join the conversation.

Steve James, DTM
FreeToastHost 2 Lead System Developer B)
District 52 Pathways Chief Ambassador / Guide
www.linkedin.com/in/sejames
Officer Emeritus
Mindful Communicators - Club 1966, Presidents Distinguished Since 2008
www.mindfulcommunicators.org

CLICK HERE to edit your "signature" for forum messages (at the bottom of the "Profile Information" tab). Please include your club # there.

Digital Tip Jar (optional) :thumbsup:

How to put an accordion in your content... 2 years 11 months ago #51438

  • LindaMann
  • LindaMann's Avatar
  • Offline
  • FreeToastHost Ambassador
  • FreeToastHost Ambassador
  • Posts: 652
  • Karma: 7
  • Thank you received: 149
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

Please Log in or Create an account to join the conversation.

Last Edit: by LindaMann. Reason: Forgot to link it

How to put an accordion in your content... 2 years 11 months ago #51441

  • LindaMann
  • LindaMann's Avatar
  • Offline
  • FreeToastHost Ambassador
  • FreeToastHost Ambassador
  • Posts: 652
  • Karma: 7
  • Thank you received: 149
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

Please Log in or Create an account to join the conversation.

How to put an accordion in your content... 2 years 11 months ago #51448

  • SteveTheTechie
  • SteveTheTechie's Avatar Topic Author
  • Away
  • FreeToastHost Developer
  • FreeToastHost Developer
  • Posts: 9967
  • Karma: 137
  • Thank you received: 2603
It is fine. My only comment is that the home page seems "busy". (A *lot* of stuff there.)
The following user(s) said Thank You: LindaMann

Please Log in or Create an account to join the conversation.

Steve James, DTM
FreeToastHost 2 Lead System Developer B)
District 52 Pathways Chief Ambassador / Guide
www.linkedin.com/in/sejames
Officer Emeritus
Mindful Communicators - Club 1966, Presidents Distinguished Since 2008
www.mindfulcommunicators.org

CLICK HERE to edit your "signature" for forum messages (at the bottom of the "Profile Information" tab). Please include your club # there.

Digital Tip Jar (optional) :thumbsup:

How to put an accordion in your content... 2 years 11 months ago #51462

  • LindaMann
  • LindaMann's Avatar
  • Offline
  • FreeToastHost Ambassador
  • FreeToastHost Ambassador
  • Posts: 652
  • Karma: 7
  • Thank you received: 149
That is why I am cleaning it up and putting the accordion and the other tabs there...

Thank you... :0)

Linda

Please Log in or Create an account to join the conversation.

How to put an accordion in your content... 2 years 11 months ago #51490

  • SteveTheTechie
  • SteveTheTechie's Avatar Topic Author
  • Away
  • FreeToastHost Developer
  • FreeToastHost Developer
  • Posts: 9967
  • Karma: 137
  • Thank you received: 2603
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)
The following user(s) said Thank You: LindaMann

Please Log in or Create an account to join the conversation.

Steve James, DTM
FreeToastHost 2 Lead System Developer B)
District 52 Pathways Chief Ambassador / Guide
www.linkedin.com/in/sejames
Officer Emeritus
Mindful Communicators - Club 1966, Presidents Distinguished Since 2008
www.mindfulcommunicators.org

CLICK HERE to edit your "signature" for forum messages (at the bottom of the "Profile Information" tab). Please include your club # there.

Digital Tip Jar (optional) :thumbsup:
Last Edit: by SteveTheTechie.

How to put an accordion in your content... 2 years 11 months ago #51492

  • LindaMann
  • LindaMann's Avatar
  • Offline
  • FreeToastHost Ambassador
  • FreeToastHost Ambassador
  • Posts: 652
  • Karma: 7
  • Thank you received: 149
Yes I know that and did that, which makes it wider but not as wide...

Linda

Please Log in or Create an account to join the conversation.

How to put an accordion in your content... 2 years 11 months ago #51571

  • SteveTheTechie
  • SteveTheTechie's Avatar Topic Author
  • Away
  • FreeToastHost Developer
  • FreeToastHost Developer
  • Posts: 9967
  • Karma: 137
  • Thank you received: 2603
News flash! B)

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:
	<div class="mainUserPanel">
		This is your normal home page content..
	</div>

	<h3>Section 1</h3>
	<div>
		This is some content.
	</div>

	<h3>Section 2</h3>
	<div>
		This is some more content.
	</div>

	<h3>Section 3</h3>
	<div>
		This is even more content.
	</div>

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.
The following user(s) said Thank You: LindaMann

Please Log in or Create an account to join the conversation.

Steve James, DTM
FreeToastHost 2 Lead System Developer B)
District 52 Pathways Chief Ambassador / Guide
www.linkedin.com/in/sejames
Officer Emeritus
Mindful Communicators - Club 1966, Presidents Distinguished Since 2008
www.mindfulcommunicators.org

CLICK HERE to edit your "signature" for forum messages (at the bottom of the "Profile Information" tab). Please include your club # there.

Digital Tip Jar (optional) :thumbsup:
Last Edit: by SteveTheTechie.

How to put an accordion in your content... 2 years 11 months ago #51574

  • SteveTheTechie
  • SteveTheTechie's Avatar Topic Author
  • Away
  • FreeToastHost Developer
  • FreeToastHost Developer
  • Posts: 9967
  • Karma: 137
  • Thank you received: 2603
bump... my last post edited
The following user(s) said Thank You: LindaMann

Please Log in or Create an account to join the conversation.

Steve James, DTM
FreeToastHost 2 Lead System Developer B)
District 52 Pathways Chief Ambassador / Guide
www.linkedin.com/in/sejames
Officer Emeritus
Mindful Communicators - Club 1966, Presidents Distinguished Since 2008
www.mindfulcommunicators.org

CLICK HERE to edit your "signature" for forum messages (at the bottom of the "Profile Information" tab). Please include your club # there.

Digital Tip Jar (optional) :thumbsup:

How to put an accordion in your content... 2 years 11 months ago #51579

  • LindaMann
  • LindaMann's Avatar
  • Offline
  • FreeToastHost Ambassador
  • FreeToastHost Ambassador
  • Posts: 652
  • Karma: 7
  • Thank you received: 149
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

Please Log in or Create an account to join the conversation.

How to put an accordion in your content... 2 years 11 months ago #51580

  • SteveTheTechie
  • SteveTheTechie's Avatar Topic Author
  • Away
  • FreeToastHost Developer
  • FreeToastHost Developer
  • Posts: 9967
  • Karma: 137
  • Thank you received: 2603
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.
The following user(s) said Thank You: LindaMann

Please Log in or Create an account to join the conversation.

Steve James, DTM
FreeToastHost 2 Lead System Developer B)
District 52 Pathways Chief Ambassador / Guide
www.linkedin.com/in/sejames
Officer Emeritus
Mindful Communicators - Club 1966, Presidents Distinguished Since 2008
www.mindfulcommunicators.org

CLICK HERE to edit your "signature" for forum messages (at the bottom of the "Profile Information" tab). Please include your club # there.

Digital Tip Jar (optional) :thumbsup:

How to put an accordion in your content... 2 years 11 months ago #51583

  • LindaMann
  • LindaMann's Avatar
  • Offline
  • FreeToastHost Ambassador
  • FreeToastHost Ambassador
  • Posts: 652
  • Karma: 7
  • Thank you received: 149
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
The following user(s) said Thank You: SteveTheTechie

Please Log in or Create an account to join the conversation.

How to put an accordion in your content... 5 months 2 weeks ago #67094

  • NSB
  • NSB's Avatar
  • Offline
  • FTH Expert Poster
  • FTH Expert Poster
  • Posts: 108
  • Thank you received: 20
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

Please Log in or Create an account to join the conversation.

THANK YOU!
- Nancy -
CLUB: 5736
WEBSITE: verbalexp.toastmastersclubs.org/
  • Page:
  • 1
Moderators: SteveTheTechieGeorgeMarshallPam
Powered by Kunena Forum