In the profile page, I want to display posts of a user. Each post might have several comments, I don't want to display all the comments to the post instead I want to display only few comments and add load more comments option. If a user clicks load more comments then I want to display some more comments. What is better way to do this? I am already using infinite scroll using pagination for posts. I think this may not work for comments.
My currents code looks like below
{% for post in post_queryset %}
<div class="title">
{{ post.title }}
</div>
{% for comment in post.comments.all %}
</div>
{{ comment.text }}
</div>
{% endfor %}
{% endfor %}
Above code simplified version of original to make things easier.
For dynamic page content, the best way to go is to use jquery and bootstrap.
When rendering the template, you could add the class "d-none" (which hides the content of the element) in the 10th or latter element:
{% for post in post_queryset %}
<div name="comment-block">
<div class="title">
{{ post.title }}
</div>
{% for comment in post.comments.all %}
<div {% if forloop.counter > 9 %} class="d-none" {% endif %} >
{{ comment.text }}
</div>
{% endfor %}
<button type="button" name="more_comments" class="btn btn-primary" > more comments </button>
</div>
{% endfor %}
This way, all the comments will be rendered, but only the first 10 will be on display.
After that, a jquery function triggered by the button click should do the trick
$("[name='more_comments']".click(function(){
var hidden_comments = $(this).parent().find('.d-none'); // selects all hidden comments
$(hidden_comments).each(function(){$(this).removeClass('d-none')}); // removes 'd-none' class
})
Keep in mind that your original code, neither my answer, does not comply with bootstrap, which is highly recommended. You can learn more about bootstrap in https://getbootstrap.com/.