javascript i wrote not working, can’t figure out why [closed]

Have you looked at the debugging the javascript code? It shows bunch of errors when you run your fiddle.

such as

Uncaught ReferenceError: openDisplay is not defined
at HTMLButtonElement.onclick ((index):181)

and this one too once you fix the above one

Uncaught TypeError: document.getElementsById is not a function
at openDisplay ((index):164)

This one is because there is no function called getElementsById since there should only be unique id for all the elements. So it should be getElementById

Jquery is certainly a better idea (For me) because of ease of using the jquery selectors.

    /* 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");
      }

    });

}

Here is a working jquery JsFiddle with comments.

Also just my two cents:
I would have organized the menu a bit differently.

For example, Instead of

<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="https://wordpress.stackexchange.com/questions/303333/<?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>

I would have each submenu under separate div so that i just put hidden on the main one.

Example

<div id="submenu">
    <div class="aquo hidden">
       <div class="submenu" id="sub-aquo">
          <p>some text with one <a>link</a></p>
       </div>
    </div>
    <div class="categories hidden">
       <div class="submenu" id="zebrology">
          <img src="https://wordpress.stackexchange.com/questions/303333/<?php echo get_template_directory_uri(); ?>/img/zebra.png" />Zebrology
       </div>
       <div class="submenu" id="clips">
           <img src="<?php echo get_template_directory_uri(); ?>/img/clip.png" />Clips
      </div>
    </div>
</div>

But each coder has his/her own style. So doesn’t matter much.

As for WordPress, it already provides an easy way to build and organize menus. All you have to do this modify the css to make it look the way you want it to look.

Check the Method 2 for manually styling the WordPress Menu from this tutorial.

Basically WordPress adds some classes to the menu which you can use to modify the look and feel of the menu.

// container class
#header .primary-menu{} 

// container class first unordered list
#header .primary-menu ul {} 

//unordered list within an unordered list
#header .primary-menu ul ul {} 

 // each navigation item
#header .primary-menu li {}

// each navigation item anchor
#header .primary-menu li a {} 

// unordered list if there is drop down items
#header .primary-menu li ul {} 

// each drop down navigation item
#header .primary-menu li li {} 

// each drap down navigation item anchor
#header .primary-menu li li a {}