Закрыть div, когда я нажимаю на любую кнопку

Question

У меня есть несколько подсказок на изображении. Я хочу, чтобы открывать div (с текстом), если щелкнуть всплывающую подсказку. Это работает отлично, используя приведенный ниже код.

Часть, которую я не могу понять: я также хочу закрыть любой открытый «tooltip_content», если я нажимаю любую всплывающую подсказку.

Я сделал это раньше (с отображением/скрыть), но я не понимаю, как это сделать, используя слайд-эффект.

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

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

Answer 1

Вы можете добавить еще одну строку:

$(".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>

объект JQuery $('.tooltip_content:visible') будет искать видимой tooltip_content DIV и если он находит один или более, он будет скользить их но исключая текущие объекты следующего элемента с .not($(this).next()).

Answer 2

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

использование этого кода внесут свой эффект.