CODEWITHSUNDEEP
jquerydrop-down-menu
Jeff Sydor
Jeff Sydor

Reputation: 317

How to close an adjacent drop down when opening another

I'm trying to set up a list of filters for a results page. But I only want one list of the three active at a time. I'm using jQuery to show/hide the lists.

Here's a stripped down version of what I'm working on. https://jsfiddle.net/JeffSydor/bgpw9x60/

$('.dropMenu ul').css('display', 'none');
$('.dropMenu').click(function() {
  var thisMenu = $(this).children('.listName'),
    thisList = $(this).children('ul');
  if (thisMenu.not('.open')) {
    thisMenu.toggleClass('open');
    thisList.slideToggle();
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="lists">
  <div class="dropMenu">
    <div class="listName">
      <p class="authors">Contributors</p>
      <i class="fas fa-caret-down"></i>
    </div>
    <ul>
      <li><a href="#" class="author">name01</a></li>
      <li><a href="#" class="author">name02</a></li>
    </ul>
  </div>
  <div class="dropMenu">
    <div class="listName">
      <p class="categories">Categories</p>
      <i class="fas fa-caret-down"></i>
    </div>
    <ul>
      <li><a href="#" class="category">cat01</a></li>
      <li><a href="#" class="category">cat02</a></li>
    </ul>
  </div>
  <div class="dropMenu">
    <div class="listName">
      <p class="tags">Tags</p>
      <i class="fas fa-caret-down"></i>
    </div>
    <ul>
      <li><a href="#" class="tag">tag01</a></li>
      <li><a href="#" class="tag">tag02</a></li>
    </ul>
  </div>
</div>

I'm trying to figure out how to look for other open menus and close them when clicking on any of the others.

I've looked into preventDefaults too, but it doesn't make any sense to me or if it would work.

Upvotes: 1

Views: 59

Answers (3)

Souleste
Souleste

Reputation: 1984

This will work, and you won't even need the if statement.

$(document).ready(function(){

	$('.dropMenu ul').css('display', 'none');

  $('.dropMenu').click(function(){
    $('.dropMenu').not($(this)).children('.listName').removeClass('open');
    $('.dropMenu').not($(this)).children('ul').slideUp();
    $(this).children('.listName').toggleClass('open');
    $(this).children('ul').slideToggle();
  });

});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="lists">
  <div class="dropMenu">
    <div class="listName">
      <p class="authors">Contributors</p>
      <i class="fas fa-caret-down"></i>
    </div>
    <ul>
      <li><a href="#" class="author">name01</a></li>
      <li><a href="#" class="author">name02</a></li>
    </ul>
  </div>
  <div class="dropMenu">
    <div class="listName">
      <p class="categories">Categories</p>
      <i class="fas fa-caret-down"></i>
    </div>
    <ul>
      <li><a href="#" class="category">cat01</a></li>
      <li><a href="#" class="category">cat02</a></li>
    </ul>
  </div>
  <div class="dropMenu">
    <div class="listName">
      <p class="tags">Tags</p>
      <i class="fas fa-caret-down"></i>
    </div>
    <ul>
      <li><a href="#" class="tag">tag01</a></li>
      <li><a href="#" class="tag">tag02</a></li>
    </ul>
  </div>
</div>

Upvotes: 0

Waldir Bolanos
Waldir Bolanos

Reputation: 423

Select the ones that are opened and close them before opening a new one

$('.dropMenu ul').css('display', 'none');
$('.dropMenu').click(function() {
  var thisMenu = $(this).children('.listName'),
    thisList = $(this).children('ul');
  if (thisMenu.not('.open')) {
    $('.dropMenu .open').removeClas('open')
    thisMenu.toggleClass('open');
    thisList.slideToggle();
  }
});

Upvotes: 1

Ian
Ian

Reputation: 6154

You can just slide all of them up and then slide the clicked one down. 

 $('.dropMenu').click(function(){
    let lists = $('.dropMenu .listName');
    $('.dropMenu .listName').removeClass('.open');
    $('.dropMenu ul').slideUp();

    $(this).children('.listName').addClass('open');
    $(this).children('ul').slideDown();
 });

Upvotes: 1

Related Questions