Features / Usability

Posted by Mark Horton 26 Jul 2018 09:51 GMT-0000 posts: 11

Hey Bernard,

Thanks for offering to help.

Sure, the HTML being used (to create the menu links, and submenu (dropdown) links) is pretty generic and calls a CSS class I created and put in the Custom CSS section (under Look and Feel) called sidenav2.

I'm going to try and attach a text file which will be a straight copy and paste of the HTML and JS from a Wiki page with the menu currently working.

As you will (hopefully, be able to see in the text file, Immediately after the heading, I include the JavaScript as an in-line plugin (hence the "{JS}" tags), as follows:

{JS()}
/* Loop through all dropdown buttons to toggle between hiding and showing its dropdown content - This allows the user to have multiple dropdowns without any conflict */
var dropdown = document.getElementsByClassName("dropdown-btn");
var i;

for (i = 0; i < dropdown.length; i++) {
  dropdown[i].addEventListener("click", function() {
    this.classList.toggle("active2");
    var dropdownContent = this.nextElementSibling;
    if (dropdownContent.style.display === "block") {
      dropdownContent.style.display = "none";
    } else {
      dropdownContent.style.display = "block";
    }
  });
}
{JS}

This (HTML and JS plugin) work fine together if I add it directly to the page, however, as the amount of pages increase, it becomes harder to maintain the menu as each change to the menu has to be replicated to each page I've added the menu to; hence why I decided to go down the Custom Module route.

The problem I'm having with that is I cannot get the JavaScript to work, whether added directly in the Custom Module's Data section (with the HTML, as I did when adding directly to a Wiki page) or adding the JavaScript in the Custom JavaScript area, under Look and Feel.

Having said this, I'm neither a Tiki nor JavaScript expert (by any means) and so it's likely I'm missing something fundamental.

Many thanks,
Mark