HTML
<dl>
<div class="item">
<dt>テキスト1</dt>
<dd>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</dd>
</div>
<div class="item">
<dt>テキスト2</dt>
<dd>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</dd>
</div>
<div class="item">
<dt>テキスト3</dt>
<dd>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</dd>
</div>
</dl>
CSS
dl{
width:400px;
margin:50px auto;
}
dl .item{
width:400px;
height:20px;
overflow:hidden;
transition: height ease-in-out 500ms;
-o-transition: height ease-in-out 500ms;
-moz-transition: height ease-in-out 500ms;
-webkit-transition: height ease-in-out 500ms;
border:1px solid #7CADB6;
margin-bottom:2px;
}
dl dt{
display:block;
height:20px;
line-height:20px;
background:#7CADB6;
cursor:pointer;
}
dl div:hover{
height:330px;
}
dl div:hover dt{
border-bottom: 1px solid #7CADB6;
}
dd{
height:300px;
margin:0;
padding:0;
}