close all items when one is open

Question

Hi i tried to close all items when i click on one like GIF shows but i couldn't find a solution to this : enter image description here

Children are hiden now : enter image description here

This is my JS code :

$('.menu-item-has-children > a').on('click', function(e){
    e.preventDefault();
    var EltToToggle = $(this).next('.sub-menu');
    var EltToToggle_parent =  EltToToggle.parents('.sub-menu');

    $(".sub-menu .sub-menu").not(EltToToggle).hide();
    // $(".sub-menu").hide();
    EltToToggle.fadeToggle();
    $(this).toggleClass('activu');
      return false;
  });

Here is my HTML code :

<ul>
   <li id="menu-item-1555" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-1555">
      <a href="#" aria-expanded="false" class="">Nos métiers :  Fonctions support</a>
        <ul class="sub-menu">
            <li id="menu-item-1673" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1673">
                <a href="#">Test insertion shortcode tableau RWD – Alex</a>
            </li>
            <li id="menu-item-1600" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1600 menu-item-has-children">
                <a href="# " aria-expanded="false" class="btnForExpanding">testu</a>

                <ul class="sub-menu">
                    <li id="menu-item-1656" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1656">
                       <a href="#">Test de tableau – page – style 3 Empilement Stacking</a>
                    </li>
                </ul>
            </li>
        </ul>
    </li>

    <li id="menu-item-1556" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1556">
        <a href="https://jobs.cegid-webfactory.dev.ci.alterway.fr/fr/experiences-enrichissantes/nos-metiers-customer-care/">Nos métiers : Customer Care</a>
    </li>
</ul>

Here is the CSS for the arrow icon not for showing or hiding item :

 .activu {
    font-weight: $fw-semiBold;

    &:after {
        transform: rotate(180deg);
    }
}

Does this answer your question? [How to open only 1 accordion at one time](https://stackoverflow.com/questions/64849514/how-to-open-only-1-accordion-at-one-time) — A. Meshu, Nov 29 '20 at 19:50
this is vanilla javascript solution https://stackoverflow.com/a/64158000/13411051 — javascript lover, Nov 29 '20 at 20:02

Martin Godzina · Accepted Answer · 2020-11-29T21:36:39.187

0

You can hide every .sub-menu but not the .sub-menu wich are children of the current .menu-item

$('.menu-item-has-children > a').on('click', function(e){
  e.preventDefault();
  var EltToToggle = $(this).next('.sub-menu');
  var notToHide = $(this).parents('.menu-item').find('.sub-menu');
     
  $(".sub-menu").not(notToHide).hide();
  EltToToggle.fadeToggle();
  $(this).toggleClass('activu');
   return false;
});

here is a fiddle

edited Nov 29 '20 at 21:36

answered Nov 29 '20 at 19:58

Martin Godzina

1,470
11
17

so there are still many .activu elements in your document after the function run? – Martin Godzina Nov 29 '20 at 20:11
.activu is just a class that change the arrow, it's not display or show the item, please see the css that i added – meryem mereyemm Nov 29 '20 at 20:18
now i got your point. I´v updated the anwser – Martin Godzina Nov 29 '20 at 20:38
now it hide children ! please see my post i added a Gif – meryem mereyemm Nov 29 '20 at 20:45
Any help please ? – meryem mereyemm Nov 29 '20 at 21:16
I´ll reconstructed this issue in a jsfiddle and provide you an anwser in few minutes – Martin Godzina Nov 29 '20 at 21:17
Does this fit your requirements? – Martin Godzina Nov 29 '20 at 21:29
No problem. It was a little bit hard to fix at the beginning without a stackblitz or fiddle. – Martin Godzina Nov 29 '20 at 21:37
Thank you Martin, i appreciate yoir help :) – meryem mereyemm Nov 29 '20 at 22:04

score 0 · Answer 2 · answered Nov 29 '20 at 19:59

0

before e.preventDefault(); add this line $(".activu").removeClass("activu");

answered Nov 29 '20 at 19:59

Fernando Del Cantão

92
9

Check in the console which class is added when you click on the submenu. You need to remove this class. Probably it is not the "activu" class. – Fernando Del Cantão Nov 29 '20 at 20:33
Fernando Del Cantao there is no class added. Jquery.fadeToggle is animating the opacity of the element inline without any classes – Martin Godzina Nov 29 '20 at 20:41
there is no class, it just the `fadeToggle()` that shows or hide items – meryem mereyemm Nov 29 '20 at 20:41

close all items when one is open

2 Answers2