When click dropdown other dropdown should hide

Question

When I click on dropdown that opening without prpblem but if i click other dropdown both dropdown are open i want to do when click dropdown that should be open other open dropdown should hide.

<div class="more-options" id="PostMenu<?php echo $p_id; ?>" onclick="openMenu(<?php echo $p_id; ?>)">
<img src="../images/ellipsis-h-solid.svg" alt="">

<div class="user-setting-drop" id="openDropMenu<?php echo $p_id; ?>">
<a href="#" title="">Report</a>
</div>
</div>

<script type="text/javascript">

            function openMenu(y){
                //alert(001);
                    $('#PostMenu'+y).on('click', function () {
                        $('#openDropMenu'+y).toggleClass('active').siblings().removeClass('active');
                        return false;
                    });
            }
          </script>

Natively it hides the dropdown when you open second one, you can create snippet by editing your question and show us the problem. — Just code, Dec 18 '18 at 07:56

score 1 · Accepted Answer · edited Jun 20 '20 at 09:12

With jQuery You Can...

determine what tag was clicked by using $(this) or e.target
delegate/register events on multiple tags with CSS selectors -- no need to use onevent attributes like onclick
reference any jQuery Object with a simple variable

Explination

If you have multiple tags that need to be registered/delegated to an event, use .class or <tagName> -- using #id is arduous and unnecessary.

$('.more-options').on('click', function() {...

Use $(this) to reference the clicked tag and chain .find() to reference it's descendants if needed. If a line gets too unwieldy, store it in a variable.

var clicked = $(this).find('.user-setting-drop');

When you want "accordion behavior", close/deactivate/collapse all tags (excluding the clicked tag by using .not()), then open/activate/expand the clicked tag.

$('.user-setting-drop').not(clicked).removeClass('active'); 
clicked.toggleClass('active');

Demo 1

Uses .remove/toggleClass() methods. It involves more work with CSS if you want some animation.

$('.more-options').on('click', function() {
  var clicked = $(this).find('.user-setting-drop');
  $('.user-setting-drop').not(clicked).removeClass('active');
  clicked.toggleClass('active');
});

.more-options {
  cursor: pointer
}

.user-setting-drop {
  max-height: 0;
  color: transparent;
  opacity: 0;
  transition: all 0.5s;
}

.active {
  height: auto;
  max-height: 5000px;
  color: #000;
  opacity: 1;
  transition: all 0.5s, max-height: 0.7s;
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.1/css/all.css">

<div class="more-options" id="PostMenu0">
  <i class="fas fa-ellipsis-h"></i>
  <div class="user-setting-drop" id="openDropMenu0">
    <a href="#/" title="">Report</a>
  </div>
</div>
<hr>

<div class="more-options" id="PostMenu1">
  <i class="fas fa-ellipsis-h"></i>
  <div class="user-setting-drop" id="openDropMenu1">
    <a href="#/" title="">Report</a>
  </div>
</div>
<hr>

<div class="more-options" id="PostMenu2">
  <i class="fas fa-ellipsis-h"></i>
  <div class="user-setting-drop" id="openDropMenu2">
    <a href="#/" title="">Report</a>
  </div>
</div>
<hr>

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

Demo 2

Uses .slideToggle/Up() methods. It involves less work with animation already built in.

$('.more-options').on('click', function() {
  var clicked = $(this).find('.user-setting-drop');
  $('.user-setting-drop').not(clicked).slideUp(300);
  clicked.slideToggle(500);
});

.more-options {
  cursor: pointer;
}

.user-setting-drop {
  display: none
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.1/css/all.css">

<div class="more-options" id="PostMenu0">
  <i class="fas fa-ellipsis-h"></i>
  <div class="user-setting-drop" id="openDropMenu0">
    <a href="#/" title="">Report</a>
  </div>
</div>
<hr>

<div class="more-options" id="PostMenu1">
  <i class="fas fa-ellipsis-h"></i>
  <div class="user-setting-drop" id="openDropMenu1">
    <a href="#/" title="">Report</a>
  </div>
</div>
<hr>

<div class="more-options" id="PostMenu2">
  <i class="fas fa-ellipsis-h"></i>
  <div class="user-setting-drop" id="openDropMenu2">
    <a href="#/" title="">Report</a>
  </div>
</div>
<hr>

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

When click dropdown other dropdown should hide

1 Answers1

With jQuery You Can...

Explination

Demo 1

Demo 2