JSFiddle - React, Tailwind, and code Playground
HTML
<div class="comments_list " id="comments">
<h2 class="title ">комментарии (<span id="comments_count">53</span>)
</h2>
<div class="comment_item" id="comment_6538622">
<span class="parent_id" data-parent_id="0"></span>
<div class="comment_body">
<div class="info " rel="6538622">
<div class="folding-dot-holder"><div class="folding-dot"></div></div>
<div id="voting_6538622" class="voting ">
<span class="minus" title="Голосовать могут только зарегистрированные пользователи"></span>
<span class="plus" title="Голосовать могут только зарегистрированные пользователи"></span>
<div class="mark positive ">
<span class="score" title="Всего 6: ↑6 и ↓0">+6</span>
</div>
</div>
<a href="http://habrahabr.ru/users/Maximus43/" class="avatar"><img src="http://media.habrahabr.ru/images/thumbs/avatars/1d/d5/52/34272/small_34272.jpg" alt=""></a>
<a href="http://habrahabr.ru/users/Maximus43/" class="username">Maximus43</a><span class="comma">,</span>
<time>29 июля 2013 в 12:16</time>
<a href="#comment_6538622" class="link_to_comment">#</a>
<span class="to_chidren"></span>
<div class="clear"></div>
</div>
<div class="message html_format ">
Тема SNI не раскрыта
</div>
<div class="reply_form_placeholder"></div>
<div class="reply">
</div>
</div>
<div class="reply_comments" id="reply_comments_6538622">
<div class="comment_item" id="comment_6538644">
<span class="parent_id" data-parent_id="6538622"></span>
<div class="comment_body">
<div class="info " rel="6538644">
<div class="folding-dot-holder"><div class="folding-dot"></div></div>
<div id="voting_6538644" class="voting ">
<span class="minus" title="Голосовать могут только зарегистрированные пользователи"></span>
<span class="plus" title="Голосовать могут только зарегистрированные пользователи"></span>
<div class="mark ">
<span class="score" title="Всего 0: ↑0 и...
JavaScript
hideReplies ();
function hideReplies () {
function getChildrenByClassName(el, className) {
var children = [];
for (var i = 0; i < el.childNodes.length; i++) {
if (el.childNodes[i].className == className) {
children.push(el.childNodes[i]);
}
}
return children;
}
function addBtn() {
var comments = document.querySelectorAll(".comments_list > .comment_item"),
comment, combody;
for (var i = 0; i < comments.length; i++) {
comment = comments[i];
var replies = comment.querySelectorAll('.reply_comments .comment_body');
if (replies.length > 0) {
combody = getChildrenByClassName(comment, 'comment_body')[0];
if (combody) {
var btn = document.createElement("input");
btn.type = "button";
btn.className = "hidereplies";
btn.value = "show replies";
combody.appendChild(btn); //don't show if replies.childNodes.length === 1
}
}
}
}
addBtn();
function hideR() {
var buttons = document.querySelectorAll(".hidereplies");
for (a = 0; a < buttons.length; a++) {
var btn = buttons[a];
btn.onclick = function (event) {
var btn = event.currentTarget;
var comments = btn.parentNode.parentNode.querySelectorAll(".reply_comments");
for (var y = 0; y < comments.length; y++) {
var reply = comments[y];
reply.style.display = (reply.style.display != 'none' ? 'none' : 'block');
}
};
}
}
hideR();
}