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.
You may try something like this:
Try same approach for other methods, so only the next first
div
with class ofwatch
will be acted and also, you could have wrapped each set in a single parent container using a uniqueid
attribute in addition to aclass
, for better grouping. For example:This way, you could have done the
jQuery
slecting more specifically, for example:Update (Thanks to haakym for pointing me that): Also, an
id
must be unique so instead of usingid='show'
use it as a class and then use: