Toggle de orange box

by Dennis Betman

HTML

<div id="orange" class="div"><a href="#"  id="orange-remove" class="remove">X</a></div>
<div id="green" class="div"><a href="#" id="green-remove" class="remove">X</a></div>
<div id="blue" class="div"><a href="#" id="blue-remove" class="remove">X</a></div>
<div id="menu-right"></div>
<div id="button">Get orange box back!</div>

CSS

.div{
    width: 200px;
    height: 300px;
    float:left;
    margin-right: 5px;
    margin-bottom: 5px;
}

.remove{
    margin-left: 5px;
    color: white;
    text-decoration: none;
}

#button{
    display:none;
}

#orange{
    background:orange;
}

#green{
    background: green;
}

#blue{
    background: blue;
}

JavaScript

$(document).ready(function() {
    $('#orange-remove').click(function() {
        $('#orange').fadeTo('fast', 0);
        $('#orange').toggle(1000);
        $('#orange-remove').hide();
        $('#button').fadeIn(1000);
    });
    
    $('#button').click(function() {
        $('#button').fadeOut(1000);
        $('#orange-remove').fadeIn(1000);        
        $('#orange').toggle(1000);
        $('#orange').fadeTo('fast', 1);
    });
});