Struggling with CSS Div visibility issue in Laravel 5

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.

Answer №1

Perhaps attempting to utilize this could result in accessing a distinct div element.

$("div:hidden")

transforming into

$(this)

Moreover, modifying the attribute from id="comment" to class="comment" would be more effective within a foreach loop!

Answer №2

To differentiate your comment divs, avoid assigning the same id id="comment" to each one. Instead, consider using unique identifiers for each comment. This way, when selecting elements in your JavaScript with "#comment", you can target specific comments more effectively.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Support with formatting a dynamic asp:CheckBoxList utilizing Bootstrap styling

I'm currently facing a challenge with styling my asp:CheckBoxList that is populated with values from a database. My framework of choice is Bootstrap 4.3.1 and I'm attempting to style the CheckBoxList using the default example below: <div cla ...

CSS issue: Font size

Can someone help me out with a CSS issue that has been tripping me up? I've been working with CSS for three years now, and this particular problem is stumping me. I have defined some styles in my CSS file that should be applied to the content of my w ...

`Is there a way to manage date formats across all components using a single method in Angular?`

I need assistance with controlling the date format of dates displayed in different components using one typescript file. How can I achieve this? app.ts import { Component } from '@angular/core'; @Component({ selector: 'app-root', ...

Verifying completed fields before submitting

I'm in the process of designing a web form for users to complete. I want all fields to be filled out before they can click on the submit button. The submit button will remain disabled until the required fields are completed. However, even after settin ...

The user_login view in the account views did not provide an HttpResponse object, but instead returned None

Error: Unable to register or log in - account.views not returning HTTP response # accounts/views.py from django.shortcuts import render, redirect from django.contrib.auth import login, authenticate, logout from account.forms import RegistrationForm, Use ...

Position the center div within the parent div and ensure it overlays another child div as well

For my chess game, I want to display a message in the middle of the screen when a player wins, such as "White Wins," etc. The current setup is as follows: <div> <p> White Wins <p/> <div/> This message share the parent div with a ...

Is it possible to conditionally redirect to a different route within the destroy() method in Laravel?

Consider this situation: There is a delete button for a post in both the list view and the detailed view. If the post is deleted from the list, it should return with a success message and if it's deleted from the detailed view, it should redirect to t ...

A numeric input area that only accepts decimal numbers, with the ability to delete and use the back

I have successfully implemented a code for decimal numbers with only two digits after the decimal point. Now, I am looking to enhance the code in the following ways: Allow users to use backspace and delete keys. Create a dynamic code that does not rely o ...

The TypeAhead feature fails to display any search results for the entered query

Feeling really desperate right now! I'm facing a frustrating issue with Bootstrap Typeahead. Here is the HTML Markup: <div class="form-group"> <label for="">Recipients</label> <input id="recipients" name="recipients" ...

Upgrade ngf-select to work with Angular 8 versions

Currently in the process of transitioning from AngularJS to Angular 8. Looking for guidance on how to update the following code snippet for Angular 8: <button class="other-button contactUsSpecific" type="button" (change)="contactCtrl.uploadFile ...

Ways to organize divs in a layout resembling a partial table

While working on my e-commerce platform with vue.js, I noticed that my product listings are not aligning properly, as displayed in the image linked below. https://i.sstatic.net/2FwaA.png My goal is to achieve the desired layout illustrated in the image b ...

Tips for customizing the appearance of a Horizontal Splitter panel in GWT version 1.5

I need to customize the style of the right side of a horizontal splitter panel. While GWT 1.7 offers support for individual panel styles, our project is currently on GWT 1.5. Here is the GWT code snippet: HTML div1 = new HTML("Div 1"); div1.setWidth("200 ...

Trouble with Javascript slideshow: Incorrect display and malfunctioning

Struggling with implementing a slideshow banner on my webpage, despite following the W3 tutorial. Here is the code I am currently using: HTML: <div class="slide-content" style="max-width:1000px"> <img class="slidepic" src="testheadphoto.jpg" st ...

Shrink or vanish: Creating a responsive header image with Bootstrap

Looking to create a dynamic header with different sections such as headerright, headercenter, and headerleft, each with unique content. I've successfully added an image to the header, but when I resize the page or view it on a mobile browser, the ima ...

Is there a way to have the menu displayed on a single line and consistently centered?

I am working on a menu that needs to stay centered at the top of the screen, with a consistent appearance and just one line, regardless of the screen width. However, I'm encountering an issue where the menu mysteriously transitions into a two-line for ...

Issue with Bootstrap column functionality on iOS devices detected

I created a card using bootstrap that displays perfectly on all devices except for iOS devices. The layout completely changes on iOS devices as shown in the screenshot attached. Here is the link to view my card on the test server: Here are the screenshot ...

Troubleshooting issues with using Laravel's history mode in conjunction with VueJS

Looking to create a seamless web single-page app using Laravel and VueJS but without the annoying "#" in the URL that appears when visiting a new page. Currently, I have: const router = new VueRouter({ mode: 'history', history: false ... ...

What is the best way to incorporate external CSS files into AMP?

Struggling to load external CSS files such as bootstrap.css and other stylesheets into an HTML file that is AMP-compatible. I've scoured the AMP documentation but have yet to find a solution. As a newcomer to both AMP and SEO, I need to implement SEO ...

Loading dynamically generated div content using AJAX with additional hyperlinks to various files has posed the question of how to seamlessly integrate the content of these links into the original div container

Issue: I am facing a challenge with my webpage setup. The main.jsp page contains a header, left panel, and content divs. When a link in the left panel is clicked, I use a JavaScript Ajax call to populate the content div with new information. This content a ...

Is there a way to create a footer that seamlessly integrates with the borders of a website?

I've been struggling to design a footer for my class website project. The problem is that the footer either overlaps the borders of the site or the text inside the footer goes under the border. I've tested several different footers, but none seem ...