GyanCode: Reply Button like facebook

Monday 7 March 2016

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">

<html xmlns="">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Untitled Document</title>

</head>

<body>

<div class='cmt'>

<div class='cmttext'></div>

<button class='replybtn'>replybtn</button>

<div class='replyform'></div>

</div>

<div class='cmt'>

<div class='cmttext'></div>

<button class='replybtn'>replybtn</button>

<div class='replyform'></div>

</div>

<div class='cmt'>

<div class='cmttext'></div>

<button class='replybtn'>replybtn</button>

<div class='replyform'></div>

</div>

<script type="text/javascript">

var varHtml = "<form method='post' ..... ><textarea name='reply' ></textarea> <input type='submit' /> </form>";

var allElements = document.body.getElementsByClassName("replybtn");

var addCommentField = function() {

for (var i = 0; allElements.length > i; i++) {

if (allElements[i] === this) {

console.log("this " + i);

if (document.getElementsByClassName("replyform")[i].innerHTML.length === 0) {

document.getElementsByClassName("replyform")[i].innerHTML = varHtml;

}

};

for (var i = 0; i < allElements.length; i++) {

allElements[i].addEventListener('click', addCommentField, false);

}

</script>

</body>

</html>

Gyancode