Mostrar div com click em href=""

HTML

<section>
    <a href="#open1" class="showto">open1</a>
    <a href="#open2" class="showto">open2</a>
</section>
<section>
    <div id="open1" class="hide"> 
        caixa 1
        <a href="#open3" class="showto">open 3</a>
    </div>
    <div id="open2" class="hide"> caixa 2</div> 
    <div id="open3" class="hide"> caixa 3</div> 
</section>

CSS

a{
    margin: 10px;
    text-decoration: none;
    background: #a9a9a9;
    color:#fff;
    padding: 5px;
}

.hide{
    display: none;
}

div{
    padding: 50px 100px;
    margin:10px;
    float:left;
}
#open1{ background: yellow; }
#open2{ background: green; }
#open3{ background: gray; }

JavaScript

$(function(){	
// Alteracao de endereco
	$('.showto').on('click', function(){
		var to = $(this).attr('href'); 
		$(to).fadeIn();
		return false;
	});
});