CODEWITHSUNDEEP
javascriptjquery
The Gmo
The Gmo

Reputation: 274

Close div when I click on any button

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();
});

Upvotes: 0

Views: 75

Answers (2)

Jai
Jai

Reputation: 74738

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()).

Upvotes: 2

Salah Nour ElDin
Salah Nour ElDin

Reputation: 508

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

use this code will make your effect.

Upvotes: 0

Related Questions