Hide everything else and only show one div

Hide everything else and only show one div

There are multiple items in a div. Each item has a button and info div.
When clicking on title in any div, I want to slide up or fade out
everything, want to display only the info of that div in kind of lightbox
style.
Here's what I'm trying and it does not work. It slides up everything on
click, but does not show the info.
HTML:
<div class="wrap">
<div class="inner">
<div class="box">
<div class="button"></div>
<div class="info">Info for box 1</div>
</div>
<div class="box">
<div class="button"></div>
<div class="info">Info for box 2</div>
</div>
</div>
</div>
CSS:
.wrap{
width: 500px;
background: yellow;
padding: 20px;
}
.box{
margin-bottom: 20px;
}
.info{
display: none;
}
.button{
width: 20px;
height: 20px;
background: green;
}
jQuery:
$('.wrap').on('click','.button',function(){
$('.inner').slideUp(400);
$(this).closest('.info').slideDown(400);
});
Demo: http://jsfiddle.net/a7wwz/