Disappear with an active list when you click on another

Asked

Viewed 32 times

-2

I created 3 lists in html, and I made a toggleClass so that the lists appear and disappear, but when I click on one and it opens, I would like all the other open lists to close... someone can help me?

Code:

$('.control-monteseupc').click(function () {
	$(this).toggleClass('active')
})
.dropdown {
  display: none;
}
.control-monteseupc.active .dropdown {
  display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div> 
  <div class="control-monteseupc">
    <h4>item1</h4>
    <div class="dropdown">
      <div class="select"><span class="text-white">item1</span></div>
      <div class="spinner"></div>
      <ul class="dropdown-menu" id="processadores">
        <li>option1</li>
        <li>option2</li>
        <li>option3</li>
      </ul>
    </div>
  </div>
    <div class="control-monteseupc">
    <h4>item2</h4>
    <div class="dropdown">
      <div class="select"><span class="text-white">item1</span></div>
      <div class="spinner"></div>
      <ul class="dropdown-menu" id="data">
        <li>option1</li>
        <li>option2</li>
        <li>option3</li>
      </ul>
    </div>
  </div>
    <div class="control-monteseupc">
    <h4>item3</h4>
    <div class="dropdown">
      <div class="select"><span class="text-white">item1</span></div>
      <div class="spinner"></div>
      <ul class="dropdown-menu" id="data1">
        <li>option1</li>
        <li>option2</li>
        <li>option3</li>
      </ul>
    </div>
  </div>

</div>

javascript jquery

  • Important you [Dit] your post and reduce the problem to a [mcve]. Studying the post available on this link can make a very positive difference in your use of the site: Stack Overflow Survival Guide in English

1 answer

1

Just remove the class .active of all the .control-monteseupc, except what was clicked. For this you use the .not(this):

$('.control-monteseupc').click(function () {
  $('.control-monteseupc')
  .not(this) // exclui o elemento clicado
  .removeClass('active');
  
  $(this)
  .toggleClass('active');
})
.dropdown {
  display: none;
}
.control-monteseupc.active .dropdown {
  display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div> 
  <div class="control-monteseupc">
    <h4>item1</h4>
    <div class="dropdown">
      <div class="select"><span class="text-white">item1</span></div>
      <div class="spinner"></div>
      <ul class="dropdown-menu" id="processadores">
        <li>option1</li>
        <li>option2</li>
        <li>option3</li>
      </ul>
    </div>
  </div>
    <div class="control-monteseupc">
    <h4>item2</h4>
    <div class="dropdown">
      <div class="select"><span class="text-white">item2</span></div>
      <div class="spinner"></div>
      <ul class="dropdown-menu" id="data">
        <li>option1</li>
        <li>option2</li>
        <li>option3</li>
      </ul>
    </div>
  </div>
    <div class="control-monteseupc">
    <h4>item3</h4>
    <div class="dropdown">
      <div class="select"><span class="text-white">item3</span></div>
      <div class="spinner"></div>
      <ul class="dropdown-menu" id="data1">
        <li>option1</li>
        <li>option2</li>
        <li>option3</li>
      </ul>
    </div>
  </div>

</div>

  • That’s just what I needed, thank you!

Browser other questions tagged javascript jquery

You are not signed in. Login or sign up in order to post.