how to toggle replies, show and hide replies. And by default they should be hidden. <p>I have this commenting system that works fine issue is when I refresh the page, replies are not folded. I have to click button to fold them </p> <p>So to be as clear as possible, if there's comment A, and then under that comment A I want to have "view all x replies" button that's folded. if that button is clicked all the replies need to be shown.</p> <p>So here's what I did. </p> <pre><code>&lt;div class="wholeReply"&gt; &lt;a href='#' class='replies'&gt; {{comment.comment_count}} replies&lt;/a&gt; &lt;div class="got_replies"&gt; &lt;ul&gt; {% for child in comment.get_children %} &lt;li&gt;{{ child.get_comment }} &lt;small&gt;&lt;a href="{% url 'userena_profile_detail' post.moderator.username %}"&gt;{{ child.user.user }}&lt;/a&gt;&lt;/small&gt; &lt;/li&gt; {% endfor %} &lt;/ul&gt; &lt;/div&gt; &lt;/div&gt; &lt;script&gt; $('.replies').click(function(e){ e.preventDefault(); $(this).next(".got_replies").fadeToggle(); // $(".reply_comment").fadeToggle(); }) &lt;/script&gt; </code></pre>