OHGODWHY

Solution to - https://wordpress.stackexchange.com/questions/303333/javascript-i-wrote-not-working-cant-figure-out-why

by Digvijay Naruka

HTML

<nav id="site-navigation" class="main-navigation">
  <div id="menu-container" class="tabs">
    <button class="menutab" id="menu-aquo">About
				</button>
    <button class="menutab" id="menu-categories">Categories
				</button>
    <button class="menutab" id="menu-involve">Get involved
				</button>
    <button class="menutab" id="menu-search">Search
				</button>

    <div id="submenu">
      <div class="submenu aquo " id="sub-aquo">
        <p>some text with one <a>link</a></p>
      </div>
      <div class="submenu categories hidden" id="zebrology">
        <img src="<?php echo get_template_directory_uri(); ?>/img/zebra.png" />Zebrology
      </div>
      <div class="submenu categories hidden" id="clips">
        <img src="<?php echo get_template_directory_uri(); ?>/img/clip.png" />Clips
      </div>
      <div class="submenu categories hidden" id="articles">
        <img src="<?php echo get_template_directory_uri(); ?>/img/text.png" />Articles
      </div>
      <div class="submenu categories hidden" id="music">
        <img src="<?php echo get_template_directory_uri(); ?>/img/music.png" />Music
      </div>
      <div class="submenu involve hidden" id="signup">
        <img src="<?php echo get_template_directory_uri(); ?>/img/signup.png" />Signup
      </div>
      <div class="submenu involve hidden" id="contact">
        <img src="<?php echo get_template_directory_uri(); ?>/img/contact.png" />Get in touch
      </div>
      <div class="submenu search hidden" id="sub-search">Search</div>
    </div>
  </div>
</nav>
<!-- #site-navigation -->

CSS

/* Menu */

#site-navigation {
  background: #366;
}

#menu-container {
  display: grid;
  grid-gap: 0rem;
  grid-row-gap: 1rem;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  align-items: center;
  justify-content: center;
}

.tabs {
  background-color: #366;
}

.tabs button {
  background-color: inherit;
  color: white;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 1rem;
  transition: 0.3s;
}

.tabs button:hover {
  background: rgba(255, 255, 255, 0.7);
  color: black;
}

.tabs button.active {
  background: rgba(255, 255, 255, 0.6);
  color: black;
}

#submenu {
  grid-column: 1/5;
  display: grid;
  grid-gap: 0rem;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  align-items: center;
  justify-content: center;
}

.submenu {
  color: white;
  background: #333;
  text-align: center;
  padding: auto;
  height: 4rem;
}

#sub-aquo {
  background-image: url("img/bgaquo.png");
  grid-column: 1/5;
}

.categories {}

.involve {}

#sub-search {}

.hidden {
  display: none;
}

JavaScript

/* Click Handlers */
$('#menu-aquo').on('click', function(e) {
  e.preventDefault();
  openDisplay(e, 'aquo');
});

$('#menu-categories').on('click', function(e) {
  e.preventDefault();
  openDisplay(e, 'categories');

});

$('#menu-involve').on('click', function(e) {
  e.preventDefault();
  openDisplay(e, 'involve');
});

$('#menu-search').on('click', function(e) {
  e.preventDefault();
  openDisplay(e, 'search');
});

function openDisplay(evt, tabName) {
  //Declare all variables
  var i, target, menutab, submenu;

  // Remove 'active' class from all menutabs
  $('.menutab').removeClass("active");
  // Add active to the current menutab
  evt.currentTarget.classList.toggle("active");

  target = "div." + tabName;

  // Select all except currently clicked submenu and hide them
  toHide = $('.submenu:not(.' + tabName + '.hidden)')
    .each(function() {

      if (!$(this).hasClass(tabName)) {
        $(this).addClass("hidden");
      }

    });
    //Select all current submenu and hide or show them
  submenu = $(target)
    .each(function() {
      if ($(this).hasClass("hidden")) {
        $(this).removeClass("hidden");
      } else {
        $(this).addClass("hidden");
      }

    });

}