Accordion on hamburger (Child links not displaying)

Question

I'm trying to create an accordion which, on click, will display it's child links.

So in my demo below, on click of parent, I'm trying to display child.

$(function() {

  // add icon on hamburger
  $(".hs-item-has-children").append('<i></i>');
  $(".hs-menu-children-wrapper").addClass('menu_hidden');


  // on click, check if dropdown is down already
  $(".hs-item-has-children").click(function() {

    //$('.hs-menu-children-wrapper').toggleClass('menu_is_visibile');
    if ($(".hs-menu-children-wrapper").hasClass('menu_hidden'))
      $(".hs-menu-children-wrapper").removeClass('menu_hidden');
      $(".hs-menu-children-wrapper").addClass('menu_is_visibile');
  });
});

.menu li.hs-item-has-children i {
  display: block;
  position: absolute;
  margin-top: 16px;
  right: 50px;
  margin-top: -28px;
}

.menu li.hs-item-has-children i {
  display: block;
}


.menu li.hs-item-has-children i:before,
.menu li.hs-item-has-children i:after {
  content: "";
  position: absolute;
  background-color: #ff6873;
  width: 3px;
  height: 9px;
}

.menu li.hs-item-has-children i:before {
  transform: translate(-2px, 0) rotate(45deg);
}

.menu li.hs-item-has-children i:after {
  transform: translate(2px, 0) rotate(-45deg);
}

.menu li.hs-item-has-children ul.hs-menu-children-wrapper.menu_hidden {
  display: none !important;
}

.menu li.hs-item-has-children ul.hs-menu-children-wrapper.menu_is_visibile {
  display: block !important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="menu">
  <ul>
  
    <li class="hs-item-has-children" role="menu"><a href="javascript:void(0)">Parent</a>
      <ul class="hs-menu-children-wrapper menu_hidden">
        <li class="hs-menu-item"><a href="javascript:void(0)">Child</a></li>
        <li class="hs-menu-item"><a href="javascript:void(0)">Child</a></li>
        <li class="hs-menu-item"><a href="javascript:void(0)">Child</a></li>
      </ul>
    </li>
    
    <li class="hs-item-has-children" role="menu"><a href="javascript:void(0)">Parent 2</a>
      <ul class="hs-menu-children-wrapper menu_hidden">
        <li class="hs-menu-item"><a href="javascript:void(0)">Child</a></li>
        <li class="hs-menu-item"><a href="javascript:void(0)">Child</a></li>
        <li class="hs-menu-item"><a href="javascript:void(0)">Child</a></li>
      </ul>
    </li>
    
  </ul>
</div>

It's also a HubSpot menu, so cannot alter the markup too much (which is why I'm using .append())

Edit:

Trying to make only the selected parent links child link show. I.e. if I click Parent 2 in the demo above, only show the child links for that ul (currently both open).

Answer 1

Change your function to:

  $(".hs-item-has-children").click(function() {
  $(this).children('.hs-menu-children-wrapper').toggleClass('menu_is_visibile');
  });

Jsfiddle: https://jsfiddle.net/ukowjqav/1/

Instead of using an if-else, you can toggle the class itself to view each parent's children. Also note that I'm using thisin the function. That way the code knows which particular item it is referencing. Hope this helps.