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

jQuery function to toggle classes on element based on visibility of other elements, toggle opposite on all but this

I have a nav menu that acts like an accordian. When I click on a menu item the sub menu appears. When I click on another main menu that sub menu appears and all the other main menus collapse. This part is working.

I want to include switching the chevron icon from pointing right, to pointing down when the menu is expanded (clicked on), and at the same time, when all the other main menus are collapsed, change the chevron icon from down back to right on those, e.g. on all others except the one clicked on.

I’m almost there, just need help with the logic.

html

    <ul class="sidebar-nav">
      <li class="dropdown">
        <a class="nav-link" href="javascript:void(0);" ><i class="bi bi-house-fill me-3 fs-3"></i>Home<i class="bi bi-chevron-right iChev"></i></a>
        <ul class="sidenav-second-level" id="collapseHome">
            <li><a href="#lastp">Another</a></li>
            <li><a href="#firstp">Link</a></li>
          </ul>
      </li>
      <li class="dropdown">
        <a class="nav-link" href="javascript:void(0);"><i class="bi bi-ethernet me-3 fs-3"></i>Plugins<i class="bi bi-chevron-right iChev"></i></a>
        <ul class="sidenav-second-level" id="collapsePlugins">
            <li><a href="#lastp">Another</a></li>
            <li><a href="#firstp">Link</a></li>
          </ul>
      </li>

jQuery

$(document).ready(function(){  
        $('li.dropdown').click(function () {  
            $('li.dropdown').not(this).find('ul').hide();
            $(this).find('ul').toggle('slow');
            if($(this).find('ul').is(":visible")){
              $(this).find('.iChev').toggleClass("bi-chevron-right bi-chevron-down");
              $('li.dropdown ').not(this).find('.iChev').toggleClass("bi-chevron-down bi-chevron-right");
            }else{
              $(this).find('.iChev').toggleClass("bi-chevron-down bi-chevron-right");
            }
        });
        $("li.dropdown ul li a").click(function(e){
            e.stopPropagation();
        });
     });

Thanks in advance for any help 🙂

Tags:

3

Answers


  1. 0

    You don’t need to toggleClass on other li as they will be hidden. Instead, you can always remove bi-chevron-down and add bi-chevron-right.

    For current li, toggle show/hide and toggleClass is sufficient. This way, with just one click, the ul will be displayed, accompanied by bi-chevron-down, and with another click, it will hide, accompanied by bi-chevron-right. So replace the click code with the following:

    $('li.dropdown').click(function () {
    $('li.dropdown').not(this).find('ul').hide();
    $('li.dropdown').not(this).find('.iChev').removeClass("bi-chevron-down").addClass('bi-chevron-right');

    $(this).find('ul').toggle('slow');
    $(this).find('.iChev').toggleClass("bi-chevron-right bi-chevron-down");
});
    Login or Signup to reply.
  2. 0

    I am assuming that you are using an icon which is by default facing the right direction and you want to make it face downwards rather than change the icon completely as it will not be efficient. So,
    There are 2 efficient methods to do so-
    First Method) You can define a id let’s say ‘facing-down’ and then add CSS property to that id as:

    #facing-down{
  translate:rotate(90deg)}

    Now you can toggle this id to the icon whenever you toggle that accordion.
    [Pro Tip: You can add transition:0.5s to give a smooth transition effect too]
    Second Method) You can use JS Property of –

    $('icon').style.transform = "rotate(90deg)";
$('icon').style.transform = "rotate(-90deg)";
    Login or Signup to reply.
  3. 0

    Try this logic, worked on my side:

    $(document).ready(function(){  
    $('li.dropdown').click(function () {  
        // Hide all other submenus and reset their chevrons
        $('li.dropdown').not(this).find('ul').hide();
        $('li.dropdown').not(this).find('.iChev').removeClass("bi-chevron-down").addClass("bi-chevron-right");

        // Toggle the current submenu
        $(this).find('ul').toggle('slow');

        // Toggle the chevron icon for the current menu item
        if($(this).find('ul').is(":visible")){
            $(this).find('.iChev').removeClass("bi-chevron-right").addClass("bi-chevron-down");
        } else {
            $(this).find('.iChev').removeClass("bi-chevron-down").addClass("bi-chevron-right");
        }
    });

    $("li.dropdown ul li a").click(function(e){
        e.stopPropagation();
    });
});

    enter image description here

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search