$ (document) .ready (function () {
 $ ('. itemsMenu & gt; a'). click (function () {
  $ ('. itemsMenu & gt; a'). removeClass ('active');
  if ($ (this) .next ('. dropMenu'). css ("display") == "none") {
   $ ('. dropMenu'). hide ('normal');
   $ (this) .next ('. dropMenu'). toggle ('normal');
   $ ('. itemsMenu & gt; a'). removeClass ('active');
   $ (this) .toggleClass ('active');
  } else $ ('. dropMenu'). hide ('normal');
  return false;
 });
}); 

. dropMenu {
 display: none;
} 

& lt; script src = "http://ajax.googleapis.com/ajax/libs /jquery/1/jquery.min.js"></script>
-2 vote against favorites
& lt; div class = "itemsMenu" & gt;
 & lt; a href = "#" & gt;
  & lt; li & gt;
   & lt; i class = "fa fa-star" aria-hidden = "true" & gt; & lt; / i & gt;
   & lt; p & gt; new & lt; / p & gt;
   & lt; i class = "fa fa-chevron-right" aria-hidden = "true" & gt; & lt; / i & gt;
  & lt; / li & gt;
 & lt; / a & gt;
 & lt; div class = "dropMenu" & gt;
  & lt; ul & gt;
& lt; a href = "" & gt;
    & lt; li & gt;
     & lt; p & gt; Socks & lt; / p & gt;
    & lt; / li & gt;
   & lt; / a & gt;
   & lt; a href = "" & gt;
    & lt; li & gt;
     & lt; p & gt; Sandals & lt; / p & gt;
    & lt; / li & gt;
   & lt; / a & gt;
   & lt; a href = "" & gt;
    & lt; li & gt;
     & lt; p & gt; Boots & lt; / p & gt;
    & lt; / li & gt;
   & lt; / a & gt;
   & lt; a href = "" & gt;
    & lt; li & gt;
     & lt; p & gt; Socks & lt; / p & gt;
    & lt; / li & gt;
   & lt; / a & gt;
   & lt; a href = "" & gt;
    & lt; li & gt;
     & lt; p & gt; Sandals & lt; / p & gt;
    & lt; / li & gt;
   & lt; / a & gt;
   & lt; a href = "" & gt;
    & lt; li & gt;
     & lt; p & gt; Boots & lt; / p & gt;
    & lt; / li & gt;
   & lt; / a & gt;
   & lt; a href = "" & gt;
    & lt; li & gt;
     & lt; p & gt; Socks & lt; / p & gt;
    & lt; / li & gt;
   & lt; / a & gt;
   & lt; a href = "" & gt;
    & lt; li & gt;
     & lt; p & gt; Sandals & lt; / p & gt;
    & lt; / li & gt;
   & lt; / a & gt;
  & lt; / ul & gt;
 & lt; / div & gt;
& lt; / div & gt;
-2 vote against favorites
& lt; div class = "itemsMenu" & gt;
 & lt; a href = "#" & gt;
  & lt; li & gt;
   & lt; i class = "fa fa-star" aria-hidden = "true" & gt; & lt; / i & gt;
   & lt; p & gt; new & lt; / p & gt;
   & lt; i class = "fa fa-chevron-right" aria-hidden = "true" & gt; & lt; / i & gt;
  & lt; / li & gt;
 & lt; / a & gt;
 & lt; div class = "dropMenu" & gt;
  & lt; ul & gt;
   & lt; a href = "" & gt;
    & lt; li & gt;
     & lt; p & gt; Socks & lt; / p & gt;
    & lt; / li & gt;
   & lt; / a & gt;
   & lt; a href = "" & gt;
    & lt; li & gt;
     & lt; p & gt; Sandals & lt; / p & gt;
    & lt; / li & gt;
   & lt; / a & gt;
   & lt; a href = "" & gt;
    & lt; li & gt;
     & lt; p & gt; Boots & lt; / p & gt;
    & lt; / li & gt;
   & lt; / a & gt;
   & lt; a href = "" & gt;
    & lt; li & gt;
     & lt; p & gt; Socks & lt; / p & gt;
    & lt; / li & gt;
   & lt; / a & gt;
   & lt; a href = "" & gt;
    & lt; li & gt;
& lt; p & gt; Sandals & lt; / p & gt;
    & lt; / li & gt;
   & lt; / a & gt;
   & lt; a href = "" & gt;
    & lt; li & gt;
     & lt; p & gt; Boots & lt; / p & gt;
    & lt; / li & gt;
   & lt; / a & gt;
   & lt; a href = "" & gt;
    & lt; li & gt;
     & lt; p & gt; Socks & lt; / p & gt;
    & lt; / li & gt;
   & lt; / a & gt;
   & lt; a href = "" & gt;
    & lt; li & gt;
     & lt; p & gt; Sandals & lt; / p & gt;
    & lt; / li & gt;
   & lt; / a & gt;
  & lt; / ul & gt;
 & lt; / div & gt;
& lt; / div & gt;
-2 vote against favorites
& lt; div class = "itemsMenu" & gt;
 & lt; a href = "#" & gt;
  & lt; li & gt;
   & lt; i class = "fa fa-star" aria-hidden = "true" & gt; & lt; / i & gt;
   & lt; p & gt; new & lt; / p & gt;
   & lt; i class = "fa fa-chevron-right" aria-hidden = "true" & gt; & lt; / i & gt;
  & lt; / li & gt;
 & lt; / a & gt;
 & lt; div class = "dropMenu" & gt;
  & lt; ul & gt;
   & lt; a href = "" & gt;
    & lt; li & gt;
     & lt; p & gt; Socks & lt; / p & gt;
    & lt; / li & gt;
   & lt; / a & gt;
   & lt; a href = "" & gt;
    & lt; li & gt;
     & lt; p & gt; Sandals & lt; / p & gt;
    & lt; / li & gt;
   & lt; / a & gt;
   & lt; a href = "" & gt;
    & lt; li & gt;
     & lt; p & gt; Boots & lt; / p & gt;
    & lt; / li & gt;
   & lt; / a & gt;
   & lt; a href = "" & gt;
    & lt; li & gt;
     & lt; p & gt; Socks & lt; / p & gt;
    & lt; / li & gt;
   & lt; / a & gt;
   & lt; a href = "" & gt;
    & lt; li & gt;
     & lt; p & gt; Sandals & lt; / p & gt;
    & lt; / li & gt;
   & lt; / a & gt;
   & lt; a href = "" & gt;
    & lt; li & gt;
     & lt; p & gt; Boots & lt; / p & gt;
    & lt; / li & gt;
   & lt; / a & gt;
   & lt; a href = "" & gt;
    & lt; li & gt;
     & lt; p & gt; Socks & lt; / p & gt;
    & lt; / li & gt;
   & lt; / a & gt;
   & lt; a href = "" & gt;
    & lt; li & gt;
     & lt; p & gt; Sandals & lt; / p & gt;
    & lt; / li & gt;
   & lt; / a & gt;
  & lt; / ul & gt;
 & lt; / div & gt;
& lt; / div & gt; 

Answer 2

$ ('. itemsMenu & gt; a'). on ('click', function (e) {
  // inside our menu item we find the "dropdown"
  var $ dropMenu = $ (this) .parent (). find ('. dropMenu');
  // if our dropMenu is visible - hide, if hidden - show
  if ($ dropMenu.is (': visible')) {
    $ dropMenu.hide ();
  } else {
    // hide all visible "dropdowns" on the page
    $ ('. dropMenu: visible'). hide ();
    $ dropMenu.show ();
  }
});

If you want an animation of the appearance and hiding of a menu item, then this can be done in two ways:

• using JS and jQuery using $ element.animate (...) instead of .show and .hide in the example above. Or, for a simple fade in and out effect, you can use .fadeIn () and .fadeOut () .
• with CSS transition . In this case, you need to add in the css transition properties to the animated element (.dropMenu in our case) and instead of .show and .hide assign or remove the class that changes the animatable parameters of the element (for example, left and opacity to “slide out” the dropdown while simultaneously appearing).