CODEWITHSUNDEEP
javascriptjqueryhtmllaravellaravel-4
Chase
Chase

Reputation: 151

Laravel foreach loop with jquery slidetoggle

So I am trying to make a basic commenting system on a blog with posts and what not but I recently came upon a new issue. I made a button that toggles shows the comments div. But the fist button opens all of the comment divs for all of the posts. I want it to be so that the comment button opens its comment div on each post respectively.

This may be hard to follow so I made a jsfiddle for it: http://jsfiddle.net/bu7z3e46/1/ I just need the comment button on one post to open the comment div on the same post. Here is the basic jsfiddle code: Html: 

<!-- Laravel Foreach loop here -->
<div class="post">
    Post content here <br>
    <button id="comm">Comments</button>
    <div class="comments">
         <!-- Foreach loop for comments -->
        Test
    </div>
</div>
<!-- end foreach loop --> 
    <!-- example of the second post -->
    <div class="post">
    Post content here <br>
    <button id="comm">Comments</button><br>
    <div class="comments">
         <!-- Foreach loop for comments -->
        Test1
    </div>
</div>

And here is the js: 

$(document).ready(function() {
  var par = $('div.comments');
  $(par).hide();

  $('#comm').click(function(e) {
      $(par).slideToggle('slow');
      e.preventDefault();
  });
});

Thanks for the help

Upvotes: 0

Views: 1319

Answers (2)

PeterKA
PeterKA

Reputation: 24638

Keep your IDs unique, or better still use a class, and take advantage of context, this, to effect changes on the target div.comments

$(document).ready(function() {
    var par = $('div.comments');
    par.slideToggle('fast');
    $('.comm').click(function(e) {
        par.filter(':visible')
        .add( $(this).closest('.post').find('div.comments') ).slideToggle('slow');
        e.preventDefault();
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Laravel Foreach loop here -->
<div class="post">
    Post content here <br>
    <button class="comm">Comments</button>
    <div class="comments">
         <!-- Foreach loop for comments -->
        Test
    </div>
</div>
<!-- end foreach loop --> 
    <!-- example of the second post -->
    <div class="post">
    Post content here <br>
    <button class="comm">Comments</button><br>
    <div class="comments">
         <!-- Foreach loop for comments -->
        Test1
    </div>
</div>

Upvotes: 0

Arun P Johny
Arun P Johny

Reputation: 388316

2 problems

  • ID of an element must be uniqe - use class
  • Need to toggle the clicked button's sibling comment

$(document).ready(function() {
  var $par = $('div.comments');
  $par.hide();

  //use comm as a class value since you want to group multiple elements
  $('.comm').click(function(e) {
    var $comm = $(this).siblings('.comments').slideToggle('slow');
    //if you want to hide previously opened comment when a new one is clicked
    $par.not($comm).slideUp('slow');
    e.preventDefault();
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Laravel Foreach loop here -->
<div class="post">
  Post content here
  <br>
  <button class="comm">Comments</button>
  <div class="comments">
    <!-- Foreach loop for comments -->
    Test
  </div>
</div>
<!-- end foreach loop -->
<!-- example of the second post -->
<div class="post">
  Post content here
  <br>
  <button class="comm">Comments</button>
  <br>
  <div class="comments">
    <!-- Foreach loop for comments -->
    Test1
  </div>
</div>

Upvotes: 2

Related Questions