html how to animate a comment form

Question

I have written this html:

 <a href="#" class="addcomment">Add Comment</a>
<div id="addcomment">
<form name="comment" action="" method="post">
<input type="text" name="addcomment" size="80" />
<input type="submit" value="Comment">
</form>

What I want is when I click the "Add comment" then form should be displayed in place of "Add comment" just like on "stackoverflow". How can I make this happen??

Have you looked at Javascript at all? This is not doable with just HTML and CSS. — Purag, Nov 28 '14 at 08:34
possible duplicate of [onclick in CSS?](http://stackoverflow.com/questions/13630229/onclick-in-css) look the answer of @Hendra Uzia — Bhojendra Rauniyar, Nov 28 '14 at 08:35

score 0 · Accepted Answer · answered Nov 28 '14 at 08:43

0

Here's a quick and dirty proof, optimize from here:

CSS:

#addcomment {
    display : none;
}
.addcomment:active {
    display : none;
}
.addcomment:active + #addcomment {
    display : block;
    position : absolute;
    top : 5px;
}

http://jsfiddle.net/7uax74qd/

answered Nov 28 '14 at 08:43

AlienWebguy

76,997
17
122
145

I tried this and it worked but when I click add comment it appears and when I release it disappear.. whats the problem?? – gamer Nov 28 '14 at 09:23

score 0 · Answer 2 · answered Nov 28 '14 at 09:15

Use javascript for it...

 <a href="#" id="add" class="addcomment" onclick="show()">Add Comment</a>
<div id="addcomment" style="display:none;">
<form name="comment" action="" method="post">
<input type="text" name="addcomment" size="80" />
<input type="submit" value="Comment">
</form>

THEN IN JAVASCRIPT write a function and call that in anchor tag..

function show()
{
document.getElementById('add').style.display='none';
document.getElementByid('addcomment').style.display='block';
}

html how to animate a comment form

2 Answers2