Javascript toggle hide and show buttons in a loop Laravel 5

Question

I am writing a Laravel 5 project with a comment section code below

@foreach($Comment as $Comment)
  <div id="comment-{!! $Comment->comments_id !!}" class="comment-wrapper">

     <div class="btn btn-lg btn-info btn-xs" class="show">Show</div>
  <div class="btn btn-lg btn-success btn-xs" class="hide">Hide</div>
  <div class="btn btn-lg btn-warning btn-xs" class="toggle">Toggle</div>

      <div class="watch" class="jumbotron alert-info">



         <ul class="list-group">
           <li class="list-group-item list-group-item-success">{!! $Comment->author  !!}</li>
           <li class="list-group-item"> {!! $Comment->text !!}</li>
           </ul>
             @if ($Comment->author == Auth::user()->name)
               <p><a href="{!! URL::route('deleteComment', $Comment->comments_id) !!}"  class=" btn-danger btn-xs" style="float:right">Delete</a></p>  



              @endif

        <h6><small>CREATED ON: {!! $Comment->created_at !!}</small></h6>
</div>
</div>
          @endforeach

and I have a javascript file which looks like this

 $(document).ready(function () {

 $('.show').click(function () {
    $(this).closest('.comment-parent').find('.watch').show('slow');
});
 $('.hide').click(function () {
    $(this).closest('.comment-parent').find('.watch').hide('slow');
});
 $('.toggle').click(function () {
    $(this).closest('.comment-parent').find('.watch').toggle('slow');
});

});

The trouble is the toggle/hide javascript function only works on one set of buttons and hides all of the comments. I want to have the set of buttons that work for each comment individually. I've tried to increment the watch class and buttons div id by adding 1 and incrementing it for each comment but can't get it to work. Any help would be appreciated thanks.

The `id` attribute for a element in html should be unique, you have the same value in a foreach loop, assign it to a class instead or give it a name with an integer next to it. — haakym, Jun 11 '15 at 18:47
I believe it's invalid HTML, you also have a `` and `` tag that pop out of nowhere. I reckon you probably want to go other you code and then run it through a html validator. Apologies if this comes across harsh, not trying to be annoying! — haakym, Jun 11 '15 at 18:54
ok thanks that's what I was trying to do but must have got the syntax wrong. what would be the correct way of doing that? — Paul Haskett, Jun 11 '15 at 18:54
not at all mate I'm quite new at this and any criticism is constructive. Thanks — Paul Haskett, Jun 11 '15 at 18:56

score 1 · Answer 1 · edited May 23 '17 at 12:06

1

You may try something like this:

$('#show').click(function () {
    $(this).next('.watch').show('slow');
});

Try same approach for other methods, so only the next first div with class of watch will be acted and also, you could have wrapped each set in a single parent container using a unique id attribute in addition to a class, for better grouping. For example:

@foreach($Comment as $Comment)
    <div id="comment-{{$comment->id}}" class="comment-wrapper">
        <div class="btn btn-lg btn-info btn-xs show">Show</div>
        <!-- More... -->
        <div class="watch" class="jumbotron alert-info">
            <!-- More... -->
        </div>
    </div>
@endforeach

This way, you could have done the jQuery slecting more specifically, for example:

$('#show').click(function () {
    $(this).closest('.comment-parent').find('.watch').show('slow');
});

Update (Thanks to haakym for pointing me that): Also, an id must be unique so instead of using id='show' use it as a class and then use:

$('.show').click(function () {
    $(this).closest('.comment-parent').find('.watch').show('slow');
});

edited May 23 '17 at 12:06

Community

1
1

answered Jun 11 '15 at 18:50

The Alpha

143,660
29
287
307

You might want to move `id="show"` over to the class attribute, otherwise each div will have `id="show"` i.e. invalid html – haakym Jun 11 '15 at 19:04
1

Thanks @haakym, I actually didn't notice that `id` at all :-) – The Alpha Jun 11 '15 at 19:05
thanks fr your help, if I change the id to class none of the buttons work? – Paul Haskett Jun 11 '15 at 20:01
If you change id to class just swap out `#` for `.` in any jQuery – haakym Jun 11 '15 at 20:14
that's what I tried didn't work for some reason. Will check to see if I made a mistake. – Paul Haskett Jun 11 '15 at 20:19
I can't see any problems, I've edited the code in my first post if you could have a look thanks. – Paul Haskett Jun 11 '15 at 20:39
ok so I've fixed the class problem by realising there was two classes but the jQuery The Alpha suggested to work – Paul Haskett Jun 11 '15 at 22:05

Javascript toggle hide and show buttons in a loop Laravel 5

1 Answers1