hide/show div animations

by grahampcharles

HTML

<div>lorem</div>
<button class="hide">Green</button><button class="show">Red</button>
<div class="slideme"></div>
<div class="slideme2" style="display:none;"></div>

CSS

.slideme {width: 200px; height:200px; background:red;}
.slideme2 {width: 200px; height:200px; background:green;}

JavaScript

$(function() {
    
    function slideUp() {
        $(".slideme").animate({ "height": "hide" });
        $(".slideme2").animate({ "height": "show" });
    }
    
    function slideDown() {
        $(".slideme2").animate({ "height": "hide" });  
        $(".slideme").animate({ "height": "show" });  
    }
    
    $(".hide").on("click", slideUp);
    $(".show").on("click", slideDown);
    
});