content div swap 2

navigation icons that swap div content upon click, each div has inside of it a hyperlink which can close it

HTML

<div class="wrapper">
    <a class="more_info" href="#testa">a</a>
    
    <div class="content">
    
    
    
    <div class="hidden_content">
    <a class="more_info" href="#">close</a>
    <br />content a
    </div>
    </div>

</div>

CSS

.wrapper {
    margin: 0 auto; width: 100%; min-height: 300px;text-align: center; position: relative; border-radius: 2px;background-color: #666666;
}
.more_info {
    height: auto;width: auto; text-align: center; position: absolute; top: 0px; right: 0px; display: block; background: white; border-radius: 5px; margin: 10px;
}
.content {
    min-height: 100px;
    width: 100%;
    overflow: none;
    text-align: center;
}
.content div {
    height: 400px;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    line-height: 30px;
}
.content div p {margin: 30px auto auto auto;}

JavaScript

$(function () {
    $('.content div.hidden_content').hide();

    $('a.more_info').click(function () {
    $(this).siblings('.hidden_content').show();
    });
    $('.content a.close').click(function () {
        $('.content div').fadeOut();
        $('a.active').removeClass('active');
    });
});