CODEWITHSUNDEEP
jquery
Runtime Terror
Runtime Terror

Reputation: 6752

Hide all opened sibling elements on click

In my menu, I want to show only ul-s which are active. Meaning if I click a different link, the previously active element should be hidden. In my example below, if Item-1 is active and I click on Item-2, the Item-1 should be hidden.

$(document).ready(function () {

  $('#main-menu').on('click', function (event) {
    $(event.target).parent().children('ul').toggleClass('hidden');
    $(event.target).parent().children('ul').addClass('is_open');
    $('#main-menu').toggleClass('is_closed');

    if ($(event.target).parent().children().length <= 1) {
      $('#main-menu .is_open').toggleClass('hidden');
      $('#main-menu ul').removeClass('is_open');
      $('#main-menu').addClass('is_closed');
    }
  });


});
.sm ul {
  display: block;
}

.sm .hidden {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

<ul id="main-menu" class="sm sm-simple">
  <li><a href="#">Item 1</a>
    <ul class="hidden">
      <li><a href="#">Item 1-1</a>
          <ul class="hidden">
            <li><a href="#">Item 1-1-1</a></li>
            <li><a href="#">Item 1-1-2</a></li>
            <li><a href="#">Item 1-1-3</a></li>
          </ul>
      </li>
      <li><a href="#">Item 1-2</a></li>
      <li><a href="#">Item 1-3</a></li>
    </ul>
  </li>
  <li><a href="#">Item 2</a>
    <ul class="hidden">
      <li><a href="#">Item 2-1</a>
          <ul class="hidden">
            <li><a href="#">Item 2-1-1</a></li>
            <li><a href="#">Item 2-1-2</a></li>
            <li><a href="#">Item 2-1-3</a></li>
          </ul>
      </li>
      <li><a href="#">Item 2-2</a></li>
      <li><a href="#">Item 2-3</a></li>
    </ul>
  </li>
  <li><a href="#">Item 3</a>
    <ul class="hidden">
      <li><a href="#">Item 3-1</a>
          <ul class="hidden">
            <li><a href="#">Item 3-1-1</a></li>
            <li><a href="#">Item 3-1-2</a></li>
            <li><a href="#">Item 3-1-3</a></li>
          </ul>
      </li>
      <li><a href="#">Item 3-2</a></li>
      <li><a href="#">Item 3-3</a></li>
    </ul>
  </li>
</ul>

Upvotes: 2

Views: 2891

Answers (2)

Nenad Vracar
Nenad Vracar

Reputation: 122077

You can just toggle $(this) and hide siblings DEMO

$('#main-menu > li > a').click(function() {
  $(this).next('.hidden').toggle();
  $('#main-menu > li > a').not($(this)).next('.hidden').hide();
})

You can alsotoggleClassDEMO

$('#main-menu > li > a').click(function() {
  $(this).next('.hidden').toggleClass('active');
  $('#main-menu > li > a').not($(this)).next('.hidden').removeClass('active');
})

For nested ul inside li you can do this DEMO

$('ul  li  a').click(function() {
  $(this).next('.hidden').slideToggle();
  $(this).parent().siblings().find('ul').slideUp();
})

Upvotes: 1

Rino Raj
Rino Raj

Reputation: 6264

Changes made

Added the below piece of code to hide all the ul

$('ul').addClass('hidden');

For optimisation purpose I used

$('#main-menu .is_open').toggleClass('hidden is_open is_closed');

$(event.target).parent().children('ul').toggleClass('hidden is_open');

Working Demo

$(document).ready(function () {

  $('#main-menu').on('click', function (event) {
    $('ul').addClass('hidden');
    $(event.target).parent().children('ul').toggleClass('hidden is_open');
    $('#main-menu').toggleClass('is_closed');
    if ($(event.target).parent().children().length <= 1) {
      $('#main-menu .is_open').toggleClass('hidden is_open is_closed');
    }
  });


});
.sm ul {
  display: block;
}

.sm .hidden {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

<ul id="main-menu" class="sm sm-simple">
  <li><a href="#">Item 1</a>
    <ul class="hidden">
      <li><a href="#">Item 1-1</a>
          <ul class="hidden">
            <li><a href="#">Item 1-1-1</a></li>
            <li><a href="#">Item 1-1-2</a></li>
            <li><a href="#">Item 1-1-3</a></li>
          </ul>
      </li>
      <li><a href="#">Item 1-2</a></li>
      <li><a href="#">Item 1-3</a></li>
    </ul>
  </li>
  <li><a href="#">Item 2</a>
    <ul class="hidden">
      <li><a href="#">Item 2-1</a>
          <ul class="hidden">
            <li><a href="#">Item 2-1-1</a></li>
            <li><a href="#">Item 2-1-2</a></li>
            <li><a href="#">Item 2-1-3</a></li>
          </ul>
      </li>
      <li><a href="#">Item 2-2</a></li>
      <li><a href="#">Item 2-3</a></li>
    </ul>
  </li>
  <li><a href="#">Item 3</a>
    <ul class="hidden">
      <li><a href="#">Item 3-1</a>
          <ul class="hidden">
            <li><a href="#">Item 3-1-1</a></li>
            <li><a href="#">Item 3-1-2</a></li>
            <li><a href="#">Item 3-1-3</a></li>
          </ul>
      </li>
      <li><a href="#">Item 3-2</a></li>
      <li><a href="#">Item 3-3</a></li>
    </ul>
  </li>
</ul>

Upvotes: 2

Related Questions