Javascript show/hide elements

The intention is that the showing and hiding of elements in the application are controlled by a single class.

Show/hide class options

toggler - clicked element (button, link, div) If you add an icon to the button, set the property pointer-events to none for the icon.

activeClass - we assign the name of the class that will be assigned to the element (button) that has a listener attached to it. (js-toggle). If the given attribute is not present, the default value of the "active" class will be added to the clicked element.

showClass - a class name that will be added to the element we want to display. The default value is "show". We can change it through the data attribute.

targets - List of elements we want to display (id attribute is mandatory)

closeElements - List of specific elements we want to close. Tab, accordion...

Show/hide logic

handler = () => {
    const closeOnly = this.toggler.hasAttribute("data-close-only");
    const openOnly = this.toggler.hasAttribute("data-open-only");

    if (closeOnly) {

      this.hide(this.targets);
      return;
    }

    this.hide(this.closeElements);

    if (openOnly) {
      this.targets.forEach((target) => this.addShowClass(target));
      this.addActiveClass(this.toggler);
      return;
    }



    // Toggle logic
    if (this.IsItShown()) {      


      this.targets.forEach((target: HTMLDivElement) => {
        const id = target.id;
        const toggler = document.querySelectorAll(
          `.js-toggle[data-target*=${id}]`
        );
        if (toggler.length) {
          toggler.forEach((button) =>
            this.removeActiveClass(button as HTMLElement)
          );
        }
      });

      this.removeActiveClass(this.toggler);

      if (this.targets) {
        this.targets.forEach((target) => this.removeShowClass(target));
      }
      return;
    }

    // Open/show elements
    this.addActiveClass(this.toggler);
    if (this.targets) {
      this.targets.forEach((target) => this.addShowClass(target));
    }
  };

closeOnly - by clicking on an element that has this attribute, we close all targeted divs

Get Predrag Nastic’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

this.hide(this.closeElements); - Hide all elements whose ids are listed (by clicking on one element, you open the targeted one and hide previously opened ones. For example Accordion)

openOnly - by clicking on an element that has this attribute, we open all targeted divs

Toggle logic — Checking whether the target elements are already shown on the page. If it is, we first remove the active class from the trigger elements (all those that have the possibility to open the targeted div). Next, we remove the active class from the toggle element itself. Finally, we hide the target elements.

If the target elements are not displayed on the page, we add the active class to both the clicked element and the target elements.

Example page

Link: https://codesandbox.io/s/toggle-w1j03g

1. Accordion — trigger element has toggle effect (target box opens and closes others or itself)
2. Modal — button opens the modal and other buttons just close. Pay attention to the modal class, which only checks if the overlay is clicked, in order to close the modal in that case. Everything else is done by the Toggle class.
3. Multiple Targets — First and second button act like toggle and the last one act like a toggle for both
4. Dropdown — simple dropdown toggle
5. Tab — similar to accordion one shows one target div and close to others
6. Offcanvas — link and button as triggers for off-canvas open only effect