Выберите класс html, чтобы показать и скрыть

Question

У меня есть следующий HTML-код, который я строю динамически на основе $.get JSON.

<div class="forum-post"> 
    <div> 
    <span class="forum-title">Test post</span><span class="forum-type label label-forum-Discussion">Discussion</span> 
    </div> 

    <div class="forum-author"> 
    By: Jared De La Cruz on Thursday, June 27, 2013 7:17:43 PM 
    </div> 
    <pre> 
    This is a test post 
    </pre> 

    <div class="btn-group"> 
    <a class="btn btn-mini btn-primary btn-forum-comment" id="51ccf2471238f1cc13000003"><i class="icon-comment icon-white"></i> comment</a> 
    </div> 

    <div class="btn-group"> 
    <a class="btn btn-mini btn-inverse btn-forum-comment-show" id="51ccf2471238f1cc13000003"><i class="icon-plus-sign icon-white"></i> show</a> 
    </div> 

    <div class="forum-comments"> 
    <div class="forum-author"> 
     By: Jared De La Cruz on Saturday, June 29, 2013 11:56:29 PM 
    </div> 
    <pre> 
     This is a test comment 
    </pre> 
    </div> 
    <hr style="border-top: 1px dotted #b0b0b0;border-bottom: 0px"> 
</div> 

Список комментариев может увеличиваться. Когда пользователь нажимает, я хочу, чтобы комментарии форума отображались/скрывались.

// Button dynamic comment show 
$("#forum").delegate(".btn-forum-comment-show", "click", function() { 
    var post = $(this).parents(".forum-comments"); 
    console.log(post); 
}); 

Как я могу захватить селектор .forum-comments выбранного поста? Точно так же, как я, как $('#ID').hide();

Answer 1

Вы можете использовать parent/closest + next методы:

$("#forum").delegate(".btn-forum-comment-show", "click", function() { 
    $(this).parent().next(".forum-comments").toggle(); 
});