Bootstrap hide and fade

Fade an element and then hide it

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.0/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/1.4.0/bootstrap.min.css">
<div class="control-group">
    <label class="control-label">Choose one:</label>
    <div class="controls">
        <label class="radio inline">
            <input type="radio" name="color-radio" id="yellow-trigger" value="yellow" />Yellow Box</label>
        <label class="radio inline">
            <input type="radio" name="color-radio" id="red-trigger" value="red" />Red Box</label>
    </div>
</div>
<div id="yellow-box" style="display: none;">
    <p>I'm yellow</p>
</div>
<div id="red-box" style="display: none;">
    <p>I'm red</p>
</div>

SCSS

#yellow-box {
    background: #ffcc00;
}

#red-box {
    clear: both;
    background: #ff0000;
}

JavaScript

$(document).ready(function () {
    $('#yellow-trigger').click(function () {
        $('#red-box').hide();
        $('#yellow-box').fadeIn('slow');
    });

    $('#red-trigger').click(function () {
        $('#yellow-box').hide();
        $('#red-box').fadeIn('slow');     
    });
});