Dynamic Content Display - Slide up and down panels in same container

by bizamajig

HTML

<div id="left">
<a href="#1">This link loads div1</a><br />
<a href="#2">This link loads div2</a><br />
<a href="#3">This link loads div3</a><br />
</div>

<div id="1" class="right">
Here is the info for div 1 which slides
</div>
<div id="2" class="right">
Here is the info for div 2 which slides
</div>
<div id="3" class="right">
Here is the info for div 3 which slides
</div>

CSS

#left {float:left; width:200px;}
.right {
    height: 0;
    background-color: #fff;
    margin-left: 205px;
    overflow: hidden;
    -webkit-transition: all 1s linear;
    -ms-transition: all 1s linear;
    -o-transition: all 1s linear;
    -moz-transition: all 1s linear;
    transition: all 1s linear;
}
.right:target {
    display: block;
    height: 5em;
    background-color: #ffa;
    -webkit-transition: all 1s linear;
    -ms-transition: all 1s linear;
    -o-transition: all 1s linear;
    -moz-transition: all 1s linear;
    transition: all 1s linear;
}