CODEWITHSUNDEEP
jquery
brunodd
brunodd

Reputation: 2584

jQuery: Show only current div on click

I have multiple divs on the page with a Show hidden content button. I was able to create a function in order to show the hidden div on click however how can I display the hidden content of the current div only?

My js:

$('.js-help-content').hide();

$('.js-show-help').click(function(e){
    e.stopPropagation();
    $('.tip:visible:not(.js-help-content)').hide();
    $('.js-help-content').fadeToggle(200);
});
$('.js-help-content').click(function(e){
    e.stopPropagation();
});
$(document).click(function(){
     $('.js-help-content').fadeOut(200);
});

jsFiddle

Upvotes: 1

Views: 2194

Answers (3)

KAD
KAD

Reputation: 11122

You can depend on the clicked link index, and use eq function to select the div with the same index .eq($(this).index('.js-show-help')) since for each help div there is a link and it will have the same index as the link in the class .js-show-help because of the markup structure:

$('.js-show-help').click(function(e){
    e.stopPropagation();
    $('.tip:visible:not(.js-help-content)').hide();
    $('.js-help-content').eq($(this).index('.js-show-help')).fadeToggle(200);
});

Updated Fiddle

Upvotes: 1

SpYk3HH
SpYk3HH

Reputation: 22580

It's because when you go to show content, you're using only a class name and not making any specific Identification to the box you want. Given you layout, you want to call to the closest parent that has a sibling to the content to show. Like so:

$('.js-help-content').hide();

$('.js-show-help').click(function(e){
    e.stopPropagation();
    $('.tip:visible:not(.js-help-content)').hide();
    $('.js-help-content').fadeOut(200);  //  this will hide others
    /* here you see, i grabbed the closest parent that was relative to your content   */
    $(this).closest(".content").next('.js-help-content').fadeToggle(200);
});
$('.js-help-content').click(function(e){
    e.stopPropagation();
});
$(document).click(function(){
     $('.js-help-content').fadeOut(200);
});
.wall {
  width: 250px;
  border: 1px solid tomato;
  padding: 15px;
  margin-bottom: 30px;
  float: left;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="wall">

  <div class="content">
    <div class="top">
      <a href="#" class="js-show-help">Show hiden content</a>
    </div>
  </div>

  <div class="tip js-help-content">
      <p class="tip-title">Lorem ipsum dolor sit amet, consectetur adipisicing.</p>
  </div>

</div>


<div class="wall">

  <div class="content">
    <div class="top">
      <a href="#" class="js-show-help">Show hiden content</a>
    </div>
  </div>

  <div class="tip js-help-content">
      <p class="tip-title">Lorem ipsum dolor sit amet, consectetur adipisicing.</p>
  </div>

</div>

Upvotes: 2

j08691
j08691

Reputation: 207923

You can do what you want with:

$('.js-help-content').hide();
$('.js-show-help').click(function(e) {
  e.stopPropagation();
  $('.js-show-help').not(this).closest('.content').next('.js-help-content').fadeOut(200);
  $(this).closest('.content').next('.js-help-content').fadeToggle(200);
});
$(document).click(function() {
  $('.js-help-content').fadeOut(200);
});

jsFiddle example

By using .closest() and .next() you can traverse the DOM to only open and close the divs you want.

Upvotes: 1

Related Questions