WP Spam

by Ajay Patel

HTML

<div class="pane">
    <h3>Nick says:</h3>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi malesuada, ante at feugiat tincidunt, enim massa gravida metus, commodo lacinia massa diam vel eros. Proin eget urna. Nunc fringilla neque vitae odio. Vivamus vitae ligula.</p>
    <p><a href="#" class="btn-delete">Delete</a> | <a href="#" class="btn-unapprove">Unapprove</a> | <a href="#" class="btn-spam">Spam</a></p>
</div>
<div class="pane spam">
    <h3>John says:</h3>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi malesuada, ante at feugiat tincidunt, enim massa gravida metus, commodo lacinia massa diam vel eros. Proin eget urna. Nunc fringilla neque vitae odio. Vivamus vitae ligula.</p>
    <p><a href="#" class="btn-delete">Delete</a> | <a href="#" class="btn-approve">Approve</a> | <a href="#" class="btn-spam">Spam</a></p>
</div>
<div class="pane">
    <h3>Smith says:</h3>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi malesuada, ante at feugiat tincidunt, enim massa gravida metus, commodo lacinia massa diam vel eros. Proin eget urna. Nunc fringilla neque vitae odio. Vivamus vitae ligula.</p>
    <p><a href="#" class="btn-delete">Delete</a> | <a href="#" class="btn-unapprove">Unapprove</a> | <a href="#" class="btn-spam">Spam</a></p>
</div>
<div class="pane">
    <h3>Jen says:</h3>
    <p>Morbi malesuada, ante at feugiat tincidunt, enim massa gravida metus, commodo lacinia massa diam vel eros. Proin eget urna. Nunc fringilla neque vitae odio. Vivamus vitae ligula.</p>
    <p><a href="#" class="btn-delete">Delete</a> | <a href="#" class="btn-unapprove">Unapprove</a> | <a href="#" class="btn-spam">Spam</a></p>
</div>
<div class="pane">
    <h3>Jen says:</h3>
    <p>Morbi malesuada, ante at feugiat tincidunt, enim massa gravida metus, commodo lacinia massa diam vel eros. Proin eget urna. Nunc fringilla neque vitae odio. Vivamus vitae ligula.</p>
    <p><a href="#" class="btn-delete">Delete</a> | <a...

CSS

body {
    margin: 10px auto;
    width: 470px;
}
a, a:visited {
    color: #000099;
}
a:hover {
    text-decoration: none;
}
h3 {
    margin: 0;
    padding: 0 0 .3em;
}
p {
    margin: 0;
    padding: 0 0 1em;
}
.pane {
    background: #ffffff;
    padding: 10px 20px 10px;
    position: relative;
    border-top: solid 1px #ccc;
}
.alt {
    background: #56d548;
}
.spam {
    color: #999999;
}

JavaScript

$(document).ready(function(){

    $(".pane:even").addClass("alt");

    $(".pane .btn-delete").click(function(){
        //alert("This comment will be deleted!");
        
        $(this).parents(".pane").animate({ backgroundColor: "#kkkkkkk" }, "fast")
        .animate({ opacity: "hide" }, "slow")
        return false;
    });

    $(".pane .btn-unapprove").click(function(){
        $(this).parents(".pane").animate({ backgroundColor: "#fff568" }, "fast")
        .animate({ backgroundColor: "#ffffff" }, "slow")
        .addClass("spam")
        return false;
    });

    $(".pane .btn-approve").click(function(){
        $(this).parents(".pane").animate({ backgroundColor: "#dafda5" }, "fast")
        .animate({ backgroundColor: "#ffffff" }, "slow")
        .removeClass("spam")
        return false;
    });

    $(".pane .btn-spam").click(function(){        
        $(this).parents(".pane").animate({ backgroundColor: "#fbc7c7" }, "fast")
        .animate({ opacity: "hide" }, "slow")
        return false;
    });

});