CODEWITHSUNDEEP
javascriptjquery
em four
em four

Reputation: 361

how to show two replies, and fold the rest of them under view replies. (I'm having hard time showing two replies)

I have a commenting system and it currently folds all replies. I want to show two replies and then fold all of them. now I looked into this http://jsfiddle.net/isherwood/Frpmj/3/ but I'm not quite getting it because I use for-loop for the replies. Here's my code.

<div class="replyInfo">
    {% if not comment.is_child %}
        <div class="wholeReply">
          {% if comment.comment_count %}
        <a href='#' class='replies'>           
         {{comment.comment_count}}</a>
          {% endif %}
        <div class="got_replies">
        <ul style="list-style-type: none;">
        {% for child in comment.get_children %}
        <li>
      {{ child.get_comment }}
        </li><hr>
        {% endfor %}
        </ul>
      </div>
    </div>
  </div>

<script>
$('.replies').click(function(e){
  e.preventDefault();
  $(this).next(".got_replies").fadeToggle(); 
})
$(".got_replies").fadeToggle(); 

</script>

can someone please help me out?

Upvotes: 2

Views: 87

Answers (2)

Larry Lane
Larry Lane

Reputation: 2191

You can use slice() function to select the first two elements with a class name of reply. You will have to add the class name reply to your html of course. Live Preview

HTML with added class name:

<div class="replyInfo">
    {% if not comment.is_child %}
        <div class="wholeReply">
          {% if comment.comment_count %}
        <a href='#' class='replies'>           
         {{comment.comment_count}}</a>
          {% endif %}
        <div class="got_replies">
        <ul style="list-style-type: none;">
        {% for child in comment.get_children %}
        <li class="reply"><!--added class to your li element-->
      {{ child.get_comment }}
        </li><hr>
        {% endfor %}
        </ul>
      </div>
    </div>
  </div>

JavaScript:

    $('.replies').click(function(e){
  e.preventDefault();
  $(this).next(".got_replies").find(".reply").slice(0,2).fadeToggle(); 
});

$(".reply").fadeToggle();

Upvotes: 1

Patrick
Patrick

Reputation: 468

Currently, you are hiding the whole div. I didn't test it, but try this:

<script>
$('.replies').click(function(e){
  e.preventDefault();
  $(this).next(".got_replies").children("ul").children("li:nth-child(n+2)").fadeToggle(); 
})

</script>

Upvotes: 0

Related Questions