When you click on "Item2" and after that, when you click on "Item1", it turns out that both item'a have the class active and they start to behave inadequately.

How to fix the item, so that when the "Item2" is opened, I clicked on "Item1", "Item2" curled up and opened "Item2".

 $('.ti-main-item').click(function() { $(this).toggleClass('active'); if ($(".tog-inf-content").is(":visible")) { $(".tog-inf-content").slideUp(); } else { $(".active .tog-inf-content").slideToggle(); } }); 
 .ti-main-item .tog-inf-content { display: none; } .ti-main-item .fa-long-arrow-down { display: inline-block; transition: transform 0.5s ease; } .ti-main-item.active .fa-long-arrow-down { transform: rotate(-180deg); } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <div class="ti-main-item"> <a href="#" class="tog-inf-nav"> <span class="ti-head">Π˜Ρ‚Π΅ΠΌ1</span> <span class="ti-arrow"><i class="fa fa-long-arrow-down"></i></span> </a> <div class="tog-inf-content"> <ul> <li><a href="#">ОписаниС</a></li> <li><a href="#">ОписаниС</a></li> <li><a href="#">ОписаниС</a></li> <li><a href="#">ОписаниС</a></li> </ul> </div> </div> <div class="ti-main-item"> <a href="#" class="tog-inf-nav"> <span class="ti-head">Π˜Ρ‚Π΅ΠΌ2</span> <span class="ti-arrow"><i class="fa fa-long-arrow-down"></i></span> </a> <div class="tog-inf-content"> <ul> <li><a href="#">ОписаниС</a></li> <li><a href="#">ОписаниС</a></li> <li><a href="#">ОписаниС</a></li> <li><a href="#">ОписаниС</a></li> </ul> </div> </div>

    2 answers 2

     $('.ti-main-item').click(function() { // Toggle current menu $(this).toggleClass('active'); $('.tog-inf-content', $(this)).slideToggle(); // Hide siblings var siblings = $(this).siblings(); siblings.removeClass('active'); $('.tog-inf-content', siblings).slideUp(); });

      $(".test") will return you an array of all the elements with the given selector. And perform the function at the first. Therefore, this option is not suitable. You need to search for the corresponding element in the context, like this:

       var $content = $(this).find(".tog-inf-content"); 

       $('.ti-main-item').click(function() { $(this).toggleClass('active'); var $content = $(this).find(".tog-inf-content"); if ($content.is(":visible")) { $content.slideUp(); } else { $content.slideToggle(); } }); 
       .ti-main-item .tog-inf-content { display: none; } .ti-main-item .fa-long-arrow-down { display: inline-block; transition: transform 0.5s ease; } .ti-main-item.active .fa-long-arrow-down { transform: rotate(-180deg); } 
       <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <div class="ti-main-item"> <a href="#" class="tog-inf-nav"> <span class="ti-head">Π˜Ρ‚Π΅ΠΌ1</span> <span class="ti-arrow"><i class="fa fa-long-arrow-down"></i></span> </a> <div class="tog-inf-content"> <ul> <li><a href="#">ОписаниС</a></li> <li><a href="#">ОписаниС</a></li> <li><a href="#">ОписаниС</a></li> <li><a href="#">ОписаниС</a></li> </ul> </div> </div> <div class="ti-main-item"> <a href="#" class="tog-inf-nav"> <span class="ti-head">Π˜Ρ‚Π΅ΠΌ2</span> <span class="ti-arrow"><i class="fa fa-long-arrow-down"></i></span> </a> <div class="tog-inf-content"> <ul> <li><a href="#">ОписаниС</a></li> <li><a href="#">ОписаниС</a></li> <li><a href="#">ОписаниС</a></li> <li><a href="#">ОписаниС</a></li> </ul> </div> </div>