whenever I click on a menu item i want all the other head menu's to be invisible

Question

okay so i have been trying to figure this out for a while now. but i want all the head menu's to be invisible whenever i click on a head menu. so if i click on discord menu. i want the other menu's to be gone. besides the sub menu ofcourse.

jsfiddle : http://jsfiddle.net/s0rxzavn/2/

HTML

   <div id="mk-menu">


        <div>
            <!-- wrapper to separate menu items for jquery -->
            <div class="mk-menu-item"> <a class="menu-head" id="ain-menu">House</a>

                <ul id="ain-menu-sub" class="mk-submenu">
                    <li><a href="#" name="ain-cal">house1</a>
                    </li>
                    <li><a href="#" name="ain-rates">house2</a>
                    </li>
                    <li><a href="#" name="ain-orates">house3</a>
                    </li>

                </ul>
            </div>
            <div class="mk-menu-item"> <a class="menu-head" id="bjt-menu">Jet</a>

                <ul id="bjt-menu-sub" class="mk-submenu">
                    <li><a href="#" name="bjt-cal">Jet1</a>
                    </li>
                    <li><a href="#" name="bjt-rates">Jet2</a>
                    </li>
                    <li><a href="#" name="bjt-orates">Jet3</a>
                    </li>
                </ul>
            </div>
            <div class="mk-menu-item"> <a class="menu-head" id="cnd-menu">Car</a>

                <ul id="cnd-menu-sub" class="mk-submenu">
                    <li><a href="#" name="cnd-cal">Car1</a>
                    </li>
                    <li><a href="#" name="cnd-rates">Car2</a>
                    </li>
                    <li><a href="#" name="cnd-orates">Car3</a>
                    </li>
                </ul>
            </div>
            <div class="mk-menu-item"> <a class="menu-head" id="and-menu">Discord</a>

                <ul id="and-menu-sub" class="mk-submenu">
                    <li><a href="#" name="and-cal">Discord1</a>
                    </li>
                    <li><a href="#" name="and-rates">Discord2</a>
                    </li>
                    <li><a href="#" name="and-orates">Discord3</a>
                    </li>
                </ul>
            </div>
        </div>

JS

jQuery(".menu-head").click(function(a) {
    var myid = jQuery(this).attr("id");
    jQuery("#" + myid + "-sub").toggle(100);
    jQuery(this).toggleClass("mk-selected");
    jQuery(this).closest('.mk-menu-item').siblings().find('ul.mk-submenu').removeClass('mk-selected').slideUp();
    a.preventDefault();
});

jQuery(".mk-submenu li").click(function(b) {
    jQuery(".mk-submenu li").removeClass("active");
    jQuery(this).addClass("active");
    b.preventDefault();
});

CSS

#mk-menu {
    color: #FFF;
    background: #556B80;
    float: center;
    margin-top: 0px;
    position: relative;
    width: 20%;
    font-family: Verdana, Geneva, sans-serif;
    padding-bottom: 39px;
    margin: auto;
    padding-bottom: 50px;
    padding-top: 50px;
}

a.menu-head {
    color: #FFF;
    display: block;
    font-size: 20px;
    margin: 100px 50px 0;
    padding: 5px;
    text-transform: uppercase;
    line-height: 15px
}

a:hover {
    background: #6E8193;
}

a.menu-head:hover {
    cursor: pointer;
}

#mk-menu ul {
    margin: 10px 0 15px 60px;
}

#mk-menu li a {
    color: #FFF;
    text-decoration: none
}

#mk-menu li a:hover {
    color: red;
    text-decoration: none
}

.mk-submenu {
    display: none;
}

.mk-submenu a {
    font-size: large
}

thank you for reading this post.

Answer 1

first of all, you have a missing closing div and many semicolons are missing in your CSS.

You can assign an "id" to each nav item like for example class="mk-menu-item" give it an id="house-menu", then add an event listener to each one of them in javascript, I'll give you an example to get the idea.

let house = document.getElementById('house-menu');
let jet = document.getElementById('jet-menu');
let car = document.getElementById('car-menu');
let discord = document.getElementById('discord-menu');

house.addEventListener('click',()=>{
    [jet,car,discord].forEach(item =>{
        item.style.display="none";
    })
})

#mk-menu {
  color: #FFF;
  background: #556B80;
  float: center;
  margin-top: 0px;
  position: relative;
  width: 100%;
  font-family: Verdana, Geneva, sans-serif;
  padding-bottom: 39px;
  margin: auto;
  padding-bottom: 50px;
  padding-top: 50px;
}

a.menu-head {
  color: #FFF;
  display: block;
  font-size: 20px;
  margin: 100px 50px 0;
  padding: 5px;
  text-transform: uppercase;
  line-height: 15px
}

a:hover {
  background: #6E8193;
}

a.menu-head:hover {
  cursor: pointer;
}

#mk-menu ul {
  margin: 10px 0 15px 60px;
}

#mk-menu li a {
  color: #FFF;
  text-decoration: none
}

#mk-menu li a:hover {
  color: red;
  text-decoration: none
}

.mk-submenu {
  display: none;
}

.mk-submenu a {
  font-size: large
}

<div id="mk-menu">


    <div>
      <!-- wrapper to separate menu items for jquery -->
      <div class="mk-menu-item" id="house-menu"> <a class="menu-head" id="ain-menu">House</a>

        <ul id="ain-menu-sub" class="mk-submenu">
          <li><a href="#" name="ain-cal">house1</a>
          </li>
          <li><a href="#" name="ain-rates">house2</a>
          </li>
          <li><a href="#" name="ain-orates">house3</a>
          </li>

        </ul>
      </div>
      <div class="mk-menu-item" id="jet-menu"> <a class="menu-head" id="bjt-menu">Jet</a>

        <ul id="bjt-menu-sub" class="mk-submenu">
          <li><a href="#" name="bjt-cal">Jet1</a>
          </li>
          <li><a href="#" name="bjt-rates">Jet2</a>
          </li>
          <li><a href="#" name="bjt-orates">Jet3</a>
          </li>
        </ul>
      </div>
      <div class="mk-menu-item" id="car-menu"> <a class="menu-head" id="cnd-menu">Car</a>

        <ul id="cnd-menu-sub" class="mk-submenu">
          <li><a href="#" name="cnd-cal">Car1</a>
          </li>
          <li><a href="#" name="cnd-rates">Car2</a>
          </li>
          <li><a href="#" name="cnd-orates">Car3</a>
          </li>
        </ul>
      </div>
      <div class="mk-menu-item" id="discord-menu"> <a class="menu-head" id="and-menu">Discord</a>

        <ul id="and-menu-sub" class="mk-submenu">
          <li><a href="#" name="and-cal">Discord1</a>
          </li>
          <li><a href="#" name="and-rates">Discord2</a>
          </li>
          <li><a href="#" name="and-orates">Discord3</a>
          </li>
        </ul>
      </div>
    </div>