Question 11051 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

dropdown menu – toggling menu icon – Jquery

Quick question…

When a user clicks on a navigation menu that says “expand_more” a dropdown appears and “expand_less” displays and replaces “expand_more”.

If a user clicks on another menu that says “expand_more” the previous dropdown menu closes but “expand_less” still displays. I need this to display “expand_more”.

With the code I currently have how do I get the previous dropdown menu to display “expand_more”?

Side Note: expand_more and expand_less are Google font icons.

Any help is gladly appreciated.

Thanks!

JS

$(".navigationV1 ul.top-level-menu .label").on("click", handleNavClick);

function handleNavClick() {
  const isActive = $(this).hasClass("active");
  if (isActive) {
    $(this).siblings(".drop-down-menu").slideToggle();
    $(this).toggleClass("active");
  } else {
    // Close already opened menus
    $(".active").removeClass("active").siblings(".drop-down-menu").slideUp();
    // Toggle top nav links
    $(this).siblings(".drop-down-menu").slideToggle();
    $(this).toggleClass("active");
  }
}

$(".navigationV1 .top-level-menu .label").on("click", function () {
  // Flip Arrow
  $(this).find(".material-symbols-outlined").toggleClass("hide");
});

CSS

.active {
  background-color: #666;
}

.drop-down-menu {
  display: none;
}

.hide {
  display: none;
}

HTML

<div class="navigationV1 top-level-menu label">

  <div class="descendant-links-container">
    <ul class="top-level-menu">

      <li>
        <a class="label">Menu 1
          <span class="material-symbols-outlined expand-icon">expand_more</span>
          <span class="material-symbols-outlined expand-icon hide">expand_less</span>

        </a>

        <ul class="drop-down-menu">
          <li>
            <a>Drop-down-menu 1</a>
          </li>
        </ul>
      </li>

      <li>
        <a class="label">Menu 2</a>
      </li>

      <li>
        <a class="label">Menu 3
          <span class="material-symbols-outlined expand-icon">expand_more</span>
          <span class="material-symbols-outlined expand-icon hide">expand_less</span>

        </a>
        <ul class="drop-down-menu">
          <li>
            <a>Drop-down-menu 2
            </a>
          </li>
        </ul>
      </li>
    </ul>
  </div>
</div>
Tags:

2

Answers


  1. 0

    You can add expand-more and expand-less class to your html spans. Make sure to change in all menu items.

    <span class="material-symbols-outlined expand-icon expand-more">expand_more</span>
<span class="material-symbols-outlined expand-icon expand-less hide">expand_less</span>

    and then change your js function to this.

     function handleNavClick() {
  const isActive = $(this).hasClass("active");
    //below two lines will reset the class state
  $('.expand-more').removeClass('hide');
  $('.expand-less').addClass('hide');
        
  if (isActive) {
    $(this).siblings(".drop-down-menu").slideToggle();
    $(this).toggleClass("active");
      $(this).find(".expand-more").removeClass("hide");     
    $(this).find(".expand-less").addClass("hide");  
  } else {
    // Close already opened menus
    $(".active").removeClass("active").siblings(".drop-down-menu").slideUp();
    // Toggle top nav links
    $(this).siblings(".drop-down-menu").slideToggle();
    $(this).toggleClass("active");
        $(this).find(".expand-more").addClass("hide");      
    $(this).find(".expand-less").removeClass("hide");
  }
}

    Second click handler is not needed.

    Login or Signup to reply.
  2. 0

    Before you close the already opened menus, you need to toggle hide class for .material-symbols-outlined for them. Like this:

      else {
    // Switch icon for opened menus
    $(".active").find(".material-symbols-outlined").toggleClass("hide");
    // Close already opened menus
    $(".active").removeClass("active").siblings(".drop-down-menu").slideUp();
    ...
  }
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search