Как мне сделать так, чтобы мои переключаемые div'ы исчезали?

У меня есть небольшая система, где вы можете щелкнуть ссылку, и div будет исчезать, вы снова щелкните ссылку, и div будет исчезать. Пока не будет 3 div. Этот код работает отлично, но единственное, что мне интересно, - это также заставить каждого затухать, когда вы нажимаете на каждый из них. Вот мой код.

CSS

.box {
background-color: #036;
height: 190px;
width: 100px;
margin-top: 10px;
}

HTML

<div class="News" style="display:none;">
<div class="box" id="news4"></div>
</div>

<div class="News" style="display:none;">
<div class="box" id="news5"></div>
</div>

<span><a href="#" id="add">More news</a></span>

Jquery

$('#add').click(function () {
$('.News').each(function () {
    if ($(this).css('display') == 'none') {
        $(this).css('display', 'block');
        return false;
    }
});
var i = 0;
$('.News').each(function () {
    if ($(this).css('display') != 'none') {
        i++;
    }
});

if (i == 3) $('#add').show();
});