CODEWITHSUNDEEP
jquery
Keith
Keith

Reputation: 4137

how to keep a ul open while other ul's toggle

I have a ul that I want to stay open while other ul's are able to toggle. When the page loads, the html looks like this: https://jsfiddle.net/q9munmab/ 

<div class="leftNav">
   <ul>
       <li>
           <div class="active">Test</div>
           <ul class="navtoggle nonactive">
              <li><a></a></li>
              <li><a></a></li>
              <li><a class="current"></a></li>
           </ul>
           <div>Test 1</div>
           <ul class="navtoggle nonactive">
              <li><a></a></li>
              <li><a></a></li>
              <li><a></a></li>
           </ul>
           <div>Test 2</div>
           <ul class="navtoggle nonactive">
              <li><a></a></li>
              <li><a></a></li>
              <li><a></a></li>
           </ul>
       </li>
   </ul>
</div>

Class "active" varies depending on which of the 3 links you click on, while class "current" is the page you are actually on. I've tried multiple variations of toggles but can't seem to figure out how to keep which ever ( div class "active" along with the ul toggled solid ) while you can toggle between the other two. Then when you click on the li a, the page will load again and start over.

 $('.navContainer li div').click(function () {
   var $t = $(this);
   var $next = $t.next('.navtoggle');
   var $back = $('.current:visible').closest('ul').prev();
   $(this).not('.leftNav li div.active').toggleClass('nonactive');
   $('.navtoggle').not($back).slideToggle();
 });

Upvotes: 1

Views: 664

Answers (1)

ameenulla0007
ameenulla0007

Reputation: 2683

Working Fiddle : https://jsfiddle.net/q9munmab/3/

As per my info, this could work for you. the solution is simple with not selector. here is how you use it.

$(".navContainer ul>li>div:not(.active)").click(function() {
    $(this).next().slideToggle();
});

UPDATED (to hide other UL's)

working fiddle : https://jsfiddle.net/q9munmab/5/

additionally added $(this).next().slideToggle().siblings("ul").hide();

use of siblings to target other UL's, in order to hide.

UPDATED (when you say, nothing happens to active UL when clicked on other divs)

working Fiddle : https://jsfiddle.net/q9munmab/7/

$(".navContainer ul>li>div.active").next().show().addClass("no-effect");
$(".navContainer ul>li>div:not(.active)").click(function() {
    $(this).next().slideToggle().siblings("ul:not(.no-effect)").hide();
});

added an extra class on load, which only effects to active div's UL, and again use of not selector to avoid activity on Active Div and UL.

Upvotes: 1

Related Questions