JSFiddle - React, Tailwind, and code Playground

by ankitjc

HTML

<a class="comment-box-btn" href="#"><i class="icon-comment"></i> Comment</a>



<div class="row comment-box" style="display:none;">
<div class="col-md-12">
<form accept-charset="UTF-8" action="" method="post"> 
<textarea class="form-control animated" cols="180" id="new-comment" name="comment" placeholder="Comment.." rows="1"></textarea>

<div class="text-right" style="margin-top:20px;">
<a class="btn btn-default close-comment-box" href="#">
<span class='glyphicon glyphicon-remove'></span> Cancel</a>
<button class="btn btn-info" type="submit">Comment</button>
</div>
</form>
</div>
</div>

JavaScript

$(function(){ 
   $(".comment-box").slideUp(); 

    //when "comment" is clicked, slide down the comment box. 
    if($( ".comment-box-btn" ).click( function() {
    $(".comment-box").slideDown();
    }));
    //when "cancel" is clicked, slide up the comment box.
    if($( ".close-comment-box" ).click( function() {
        $(".comment-box").slideUp()
    }));
    
});