user3438917 user3438917 - 7 months ago 7
HTML Question

How to target sub-nav and toggle only one at a time

How can I toggle the secondary navigation links after clicking the "HEADER" button (under the "this should toggle the ul links"), and only one at a time. When the user clicks the button, it should close any other subnav links at its level, only allowing one to be open at a time. It should also be able to close, without triggering the other to open.

<div class="inner">
<button data-target="#data-nav-0" data-toggle="collapse" data-state="show" class="list-header major no-style"> <span>HEADER</span> </button>
<div class="col-wrapper collapse in" id="data-nav-0" style="display: block;">
<div class="column">
<ul class="list-unstyled">

<li class="list-header mobile"><a href="#" class="link">link</a></li>
<li class="list-header desktop"><a href="#">head</a></li>
<li class="mobile chevron-right" data-target="#data-inner-0-0" data-toggle="collapse" data-state="hide">
<button class="no-style">This should toggle the ul links</button>
</li>

<ul class="inner collapse" id="data-inner-0-0">
<li><a href="#" class="link">link</a></li>
<li><a href="#" class="link">link</a></li>
<li><a href="#" class="link">link</a></li>
<li><a href="#" class="link">link</a></li>
</ul>
</ul>
</div>
<div class="column">
<ul class="list-unstyled">
<li class="list-header desktop"><a href="#">Link</a></li>
<li class="mobile chevron-right" data-target="#data-inner-0-1" data-toggle="collapse" data-state="hide">
<button class="no-style">This should toggle the ul links</button>
</li>

<ul class="inner collapse" id="data-inner-0-0">
<li><a href="#" class="link">link</a></li>
<li><a href="#" class="link">link</a></li>
<li><a href="#" class="link">link</a></li>
<li><a href="#" class="link">link</a></li>
</ul>
</ul>
</ul>
</div>
</div>
</div>


jQuery

$('.list-header').next('div').toggle();
$('.list-header').click(function() {
$('.list-header').next('div').slideUp();
$(this).next('div').toggle();
return false;
});

$('.mobile').next('div').toggle();
$('.mobile').click(function() {
$('.mobile').next('div').slideUp();
$(this).next('div').toggle();
return false;
});


JSFIDDLE: https://jsfiddle.net/jdkwcpva/

GG. GG.
Answer

This code solves your issue:

$('.mobile').next('ul').toggle();    // <-- .next('ul') instead of .next('div')
$('.mobile').click(function() {
  $('.mobile').next('ul').slideUp(); // <-- same
  $(this).next('ul').toggle();       // <-- same
  return false;
});

DEMO