Simple "click to comment" Form

by Kevin Pliester

HTML

<div id="open">
    Kommentieren...
</div>

<div id="form">
    <div id="close">Abbrechen</div>
    <form>
        <textarea placeholder="Message..."></textarea>
        <br />
        <input type="submit" value="Submit">
    </form>
</div>

CSS

body {
    font-family: arial;
}

#open,
#close {
    padding: 25px 0;
    cursor: pointer;
    transition: all;
}

#form {
    padding: 0;
    transition: all;
}

#form textarea {
    border: 2px solid #333;
    background: #fff;
    padding: 10px;
}

#form input[type="submit"] {
    border: 2px solid #333;
    background: #333;
    color: #fff;
    padding: 5px 10px;  
    cursor: pointer;  
}

JavaScript

$(document).ready(function($) {

    $("#form").hide();

    $("#open").click(function() {
        $("#open").hide();
        $("#form").fadeIn(1500);
        return false;
    });

    $("#close").click(function() {
        $("#form").hide();
        $("#open").fadeIn(1500);
        return false;
    });
});