Welcome, Guest

1. The "search..." box above searches the Docs & Forum Posts. The "Search" tab above just searches the Forum Posts.

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: support.toastmastersclubs.org/doc "There's a doc for that!"
4. There is an "Opt In" Feature for newly added members. The Opt In document explains the ~~strikethrough~~ member information. Click Here to View the Post
5. 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.
6. 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.
7. We are always looking for new FreeToastHost Ambassadors to join our team 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 Send Us a Private Message.

Page:
1

TOPIC:

Best way to create an accordion dropdown 4 years 11 months ago #80734

_queen_beans
Topic Author
Offline
New Member
Posts: 4
Thank you received: 0

My team would like to implement an accordion dropdown on one of our pages, as it's addresses the problem of seamlessly displaying many categorized ordered lists.

Here's a sample of the desired outcome, implemented in codepen.io
Sample in Codepen.io

I understand there are risks with utilizing js and the admins of this platform are generally not happy when people use them. Mine is vanilla js and not external, however. I'd like to work with the creators of FTH and not get my website frozen/ wiped. Here's a snipped of the code I'd like to use.

      var acc = document.getElementsByClassName("accordion");
      var i;

      for (i = 0; i < acc.length; i++) {
        acc[i].addEventListener("click", function() {
          this.classList.toggle("active");
          this;
          var panel = this.nextElementSibling;
          if (panel.style.display === "block") {
            panel.style.display = "none";
            this.style["background-color"] = "#004165";
          } else {
            panel.style.display = "block";
            this.style["background-color"] = "rgb(119, 36, 50)";
          }
        });
      }

The topic has been locked.

Best way to create an accordion dropdown 4 years 11 months ago #80736

Brian Offline Administrator Posts: 10469 Thank you received: 3866	FTH does not support any 3rd party scripts. If your script breaks anything we will clear the page. Please read the Terms of use. support.toastmastersclubs.org/doc/item/terms-of-use-agreement
	The topic has been locked.

Best way to create an accordion dropdown 4 years 11 months ago #80738

Pam Offline Administrator Posts: 3704 Thank you received: 1120	Refer to this post for creating accordions in FTH support.toastmastersclubs.org/2011-10-23...dion-in-your-content
	Last edit: by Pam. The topic has been locked.

Best way to create an accordion dropdown 4 years 11 months ago #80739

_queen_beans Topic Author Offline New Member Posts: 4 Thank you received: 0	Any comment on this response? Attachments:
	The topic has been locked.

Best way to create an accordion dropdown 4 years 11 months ago #80740

SteveTheTechie
Offline
Administrator
Posts: 11526
Thank you received: 3795

So you pulled one of my posts from over 5 years ago... :pinch:

The fundamental problem is that you may move on from Toastmasters and then your current club is stuck with maintaining whatever you implemented. They will then likely come to us and ask us to help them update your code. We really do not want to be in the position of having to teach people how to do Javascript correctly (not our purpose) or having to fix some problem that somebody else created because they did not heed our warnings. We are volunteers giving up a bit of our little spare time.

In your case, class names "accordion" and "active" will sooner or later end up clashing w/ our code. Only good work around is prefixing them with your club number.

Last edit: by SteveTheTechie.

The topic has been locked.

Best way to create an accordion dropdown 4 years 11 months ago #80741

_queen_beans Topic Author Offline New Member Posts: 4 Thank you received: 0	To be fair, the thread with the official, endorsed accordion solution is also over 5 years old. I'm just working with whatever information I can gather. But I'll stick with the linked solution as I really don't want to pull teeth over this. Thanks for all your help.
	Last edit: by _queen_beans. The topic has been locked.

Best way to create an accordion dropdown 4 years 11 months ago #80742

SteveTheTechie
Offline
Administrator
Posts: 11526
Thank you received: 3795

_queen_beans wrote:
To be fair, the thread with the official, endorsed accordion solution is also over 5 years old.

Ok, but the difference is that I purposely reserve the class names in the "official" solution (I will never use them), and the library that is used behind the scenes for that is one that we already use. Lastly, it produces styling that is consistent with TM requested branding colors.

Bottom line is that you can really do anything you want, but we reserve the right to clear any broken code that we are requested to fix. (because it is not our intent to fix that code or support it)

Last edit: by SteveTheTechie.

The topic has been locked.