JSFiddle - React, Tailwind, and code Playground

by glebcha

HTML

<div id="comments">
    <div class="comment_item">textsample
        <div class="comment_body">test1
            <input type="button" id="hidereplies" value="show replies">
        </div>
        <div class="reply_comments reply">
            <div class="comment_body">comment goes here</div>
        </div>
    </div>
    <div class="comment_item">textsample
        <div class="comment_body">test2 - no comments
            <input type="button" id="hidereplies" value="show replies">
        </div>
        <div class="reply_comments reply">
            <div class="comment_body">comment goes here</div>
        </div>
    </div>
    <div class="comment_item">textsample
        <div class="comment_body">test3 - no comments
            <input type="button" id="hidereplies" value="show replies">
        </div>
        <div class="reply_comments reply"></div>
    </div>
</div>

CSS

#list {
    width:150px;
}
.reply {
    display:none;
}
.show {
    display:block;
}

JavaScript

var ol = document.getElementById("comments");
		if(ol.addEventListener) {
			ol.addEventListener("click", showHide, false);
		}
		else if(ol.attachEvent) {
			ol.attachEvent("onclick", showHide);
		}
	
	function showHide(event) {
		var e = event || window.event;
		var target = e.target || e.srcElement;
		var child = target.childNodes;
		for(var i = 0; i<child.length; i++) {
			if(child[i].className == "reply") {
				child[i].className = "show";
			}
			else {
				child[i].className = "reply";
			}	
		}
	}