单击任何按钮时关闭div

Question

I'm having a few tooltips on an image. I want to slide open a div (with text) if a tooltip is clicked. This is working fine using the code below.

The part I can't figure out: I also want to close any open "tooltip_content" if I press any of the tooltips.

I did build this before (with display/hide) but am out of ideas how to do it using a slide-effect.

<div class="tooltip">
  <div class="inner"></div>
  <div class="tooltip_content">Text</div>
</div>

$(".tooltip .inner").click(function(){
  $(this).next().slideToggle();
});

Answer 1

You can add one more line :

 $(".tooltip .inner").click(function() { $('.tooltip_content:visible').not($(this).next()).slideUp(); $(this).next().slideToggle(); }); 

 .tooltip_content { display: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="tooltip"> <div class="inner">inner1</div> <div class="tooltip_content">Text1</div> </div> <div class="tooltip"> <div class="inner">inner2</div> <div class="tooltip_content">Text2</div> </div> <div class="tooltip"> <div class="inner">inner3</div> <div class="tooltip_content">Text3</div> </div> 

The jQuery object $('.tooltip_content:visible') will look for the visible tooltip_content div and if it finds one or more, it will slide them up but excluding the current objects next item with .not($(this).next()) .

Answer 2

 $(".tooltip_content").click(function(){
  $('.tooltip_content:visible').slideToggle();
});

use this code will make your effect.