“more” button expand only one specific div

Question

I have problem with my jquery code. I have 2 section (contaier). Insdie this cointainers I have similar construction. Code below. What I want to do is when I click on "more" button in first container I want to show hidden info only in this div. When I click more in second container I want to show hidden info only in this div. How to do that? Now my button expand all hidden info in all divs

 $('.info').hide(); $('.show-info').click(function(){ $('.info').slideToggle("fast"); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="container"> <div class="row"> <p>adsadasdasd</p> <a href="#" class="btn btn-default show-info">more</a> <div class="info"> <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro perspiciatis sequi, modi architecto assumenda perferendis tenetur sunt optio quaerat est id atque, laudantium numquam distinctio sint provident, necessitatibus nobis nesciunt.</div> </div> </div> </div> <div class="container"> <div class="row"> <p>adsadasdasd</p> <a href="#" class="btn btn-default show-info">more</a> <div class="info"> <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro perspiciatis sequi, modi architecto assumenda perferendis tenetur sunt optio quaerat est id atque, laudantium numquam distinctio sint provident, necessitatibus nobis nesciunt.</div> </div> </div> </div> 

Answer 1

When I click more in second container I want to show hidden info only in this div.

Now my button expands all hidden info in all divs.

The issue is that you are using

$(".info").slideToggle()

which says: slideToggle all items with the class .info - instead, you need to limit to only the .show-info that matches the button clicked.

You do this by using this inside the event handler.

Given that information, finding the related item depends on the HTML structure and will be different for each scenario. In the case for this question:

$('.info').closest(".row").hide();
$('.show-info').click(function(){
    $(this).closest('.row').next().slideToggle("fast"‌​);
});

Where each info/show-info are on subsequent .row rows.

(The OPs comment of .nextAll().first() is the same as .next() - you would normally using .nextAll(filter).first() ).

(You'll also need to change the initial hide so that it hides .row rows to match the slide).

---

Update : This assumes the following html as described in the question/comments:

<div class="container">
  <div class="row">
    <p>some info</p>
    <a href="#" class="btn btn-default show-info">more</a>
  </div>
  <div class="row">
    <div class="info">
       <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro perspiciatis sequi, modi architecto assumenda perferendis tenetur sunt optio quaerat est id atque, laudantium numquam distinctio sint provident, necessitatibus nobis nesciunt.</div>
    </div>
  </div>
  <div class="row">
    <p>second row of info</p>
    <a href="#" class="btn btn-default show-info">more</a>
  </div>
  <div class="row">
    <div class="info">
       <div>Second set of expanded info.</div>
    </div>
  </div>
</div>

which shows that if you're toggling .row then that's what you need to hide initially.

Note: rather than hide via js, it would be better to hide on load, ie:

<div class="row" style='display:none'>
    <div class="info">

Answer 2

Use next() function find the next info and toggle it. And also if you want to hide them when page load call hide on them onload or keep them in display none using css.

 $('.show-info').click(function(){ $(this).next(".info").slideToggle("fast"); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="container"> <div class="row"> <p>adsadasdasd</p> <a href="#" class="btn btn-default show-info">more</a> <div class="info"> <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro perspiciatis sequi, modi architecto assumenda perferendis tenetur sunt optio quaerat est id atque, laudantium numquam distinctio sint provident, necessitatibus nobis nesciunt.</div> </div> </div> </div> <div class="container"> <div class="row"> <p>adsadasdasd</p> <a href="#" class="btn btn-default show-info">more</a> <div class="info"> <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro perspiciatis sequi, modi architecto assumenda perferendis tenetur sunt optio quaerat est id atque, laudantium numquam distinctio sint provident, necessitatibus nobis nesciunt.</div> </div> </div> </div> 

Answer 3

The best way is to find the hidden info inside the current row and slideToggle it.

take a look at the snippet:

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="container"> <div class="row"> <p>adsadasdasd</p> <a href="#" class="btn btn-default show-info">more</a> <div class="info"> <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro perspiciatis sequi, modi architecto assumenda perferendis tenetur sunt optio quaerat est id atque, laudantium numquam distinctio sint provident, necessitatibus nobis nesciunt.</div> </div> </div> </div> <div class="container"> <div class="row"> <p>adsadasdasd</p> <a href="#" class="btn btn-default show-info">more</a> <div class="info"> <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro perspiciatis sequi, modi architecto assumenda perferendis tenetur sunt optio quaerat est id atque, laudantium numquam distinctio sint provident, necessitatibus nobis nesciunt.</div> </div> </div> </div> <script> $('.info').hide(); $('.show-info').click(function(){ $(this).parent().find('.info').slideToggle("fast"); }); </script> 

Answer 4

Use this code:

 $('.info').hide(); $('.show-info').click(function(){ $('.info').slideUp('fast'); $(this).closest(".row").find(".info").slideToggle('fast'); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="container"> <div class="row"> <p>adsadasdasd</p> <a href="#" class="btn btn-default show-info">more</a> <div class="info"> <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro perspiciatis sequi, modi architecto assumenda perferendis tenetur sunt optio quaerat est id atque, laudantium numquam distinctio sint provident, necessitatibus nobis nesciunt.</div> </div> </div> </div> <div class="container"> <div class="row"> <p>adsadasdasd</p> <a href="#" class="btn btn-default show-info">more</a> <div class="info"> <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro perspiciatis sequi, modi architecto assumenda perferendis tenetur sunt optio quaerat est id atque, laudantium numquam distinctio sint provident, necessitatibus nobis nesciunt.</div> </div> </div> </div>