My current issue involves using CSS to hide comments within a hidden div, and displaying them when the user clicks "load more." However, if there are multiple statuses, all comments load together when the button is clicked. I'm struggling to identify the problem – any ideas?
<style>
/*Comment pagination*/
#comment {
display:none;
}
</style>
This represents my view:
@if($post->comments()->count()===0)
@else
<div class="inner-all block">
<a href="#" id="loadMore-{{$post->id}}" class="btn btn-primary btn-sm" style="margin-top:3px; ">Load More Comment ({{ $post->comments()->count() }})</a>
</div>
@endif
Here is my Comment Div:
@foreach($post->comments as $comment)
<div id="comment">
<div class="line no-margin"></div><!-- /.line -->
<div class="media inner-all no-margin">
<div class="pull-left">
<img src="{{ asset('user_profile_image/'. $comment->user->profile_image) }}" alt="{{$comment->user->name}}" class="img-post2">
</div><!-- /.pull-left -->
<div class="media-body">
<a href="{{ route('profile.index',['id'=>$comment->user->id]) }}" class="h4"><span style="font-size: medium;">{{$comment->user->name}}</span></a>
<medium class="block text-muted">{{ $comment->comment }}</medium><br>
<em class="text-xs text-muted">Posted on <span class="text-danger">{{$comment->created_at->diffForHumans()}}</span></em>
</div><!-- /.media-body -->
</div><!-- /.media -->
</div>
@endforeach
Subsequently, Javascript steps in to monitor actions:
@foreach($posts as $post)
<script>
$(function () {
$("#comment").slice(0, 4).show();
$("#loadMore-{{$post->id}}").on('click', function (e) {
e.preventDefault();
$("div:hidden").slice(0, 18).slideDown();
if ($("div:hidden").length == 0) {
$("#load").fadeOut('slow');
}
/**
$('html,body').animate({
scrollTop: $(this).offset().top
}, 1500);
**/
});
});
</script>
@endforeach
Despite attempting to use different IDs for unique identification, it appears that my strategy isn't effective. Any advice or suggestions would be greatly appreciated.