JSFiddle - React, Tailwind, and code Playground

by jepperask

HTML

<div id="test">
    <p id="commentExpand" class="linkLikeButton">Comment</p>
    <textarea id="commentArea" style="display: none"></textarea>
    </br></br>
    <p id="cancelComment" class="linkLikeButton" style="display: none;">Annullér</p>
</div>

CSS

.linkLikeButton {
    top: 0px;
    left: 0px;
    width: 70px;
    height: 20px;
    padding: 5px;
    margin: 0;
    display: inline-block;
    background-color: #d5d5d5;
    border: 1px solid #d5d5d5;
    -webkit-transition: all 0.25s ease-in-out;
    -moz-transition: all 0.25s ease-in-out;
    -ms-transition: all 0.25s ease-in-out;
    -o-transition: all 0.25s ease-in-out;
}

#area {
    top: 0px;
    left: 0px;
    width: 70px;
    height: 20px;
    background-color: #999999;
    padding: 5px;
}
#test {
    padding: 0;
}
}

JavaScript

$( "#commentExpand" ).click(function() {
    $( "#commentExpand" ).css("display", "none");
    $( "#commentArea, #cancelComment" ).css("display", "inline");
    $( "#commentArea" ).animate(
        {
            width: '100%',
            height: '100px'
        },1000);
});

$( "#cancelComment" ).click(function() {
    $( "#commentArea" ).animate(
        {
            width: '70px',
            height: '20px'
        },1000, function() {
        	$( "#commentArea, #cancelComment" ).css("display", "none");
            $( "#commentExpand" ).css("display", "block");
        });
});