HTML
<dl>
<dt>テキスト1</dt>
<dd id="first">
<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
</dd>
<dt>テキスト2</dt>
<dd id="second">
<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
</dd>
<dt>テキスト3</dt>
<dd id="third">
<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
</dd>
</dl>
CSS
p{
margin:0;
padding:0;
}
dl{
width:400px;
margin:50px auto;
padding:0;
}
dl dt{
background:#7CADB6;
border-bottom:1px solid #FFFFFF;
cursor:pointer;
margin:0;
padding:0;
}
dl dd{
border:1px solid #7CADB6;
border-top:none;
height:300px;
margin:0;
padding:0;
}
JavaScript
window.addEventListener("load",function(){
second.style.visibility = "hidden";
third.style.visibility = "hidden";
second.style.color = "rgba(0,0,0,0)";
third.style.color = "rgba(0,0,0,0)";
second.style.height = "0";
third.style.height = "0";
second.style.border = "none";
third.style.border = "none";
first.parentNode.childNodes[1].addEventListener("click",function(){
third.style.height = "0";
third.style.visibility = "hidden";
third.style.webkitTransition = "500ms ease-in-out";
third.style.color = "rgba(0,0,0,0)";
third.style.border = "none";
first.style.height = "300px";
first.style.visibility = "visible";
first.style.webkitTransition = "500ms ease-in-out";
first.style.color = "rgba(0,0,0,1.0)";
first.style.border = "1px solid #7CADB6";
first.style.borderTop = "none";
second.style.height = "0";
second.style.visibility = "hidden";
second.style.webkitTransition = "500ms ease-in-out";
second.style.color = "rgba(0,0,0,0)";
second.style.border = "none";
});
second.parentNode.childNodes[5].addEventListener("click",function(){
first.style.height = "0";
first.style.visibility = "hidden";
first.style.webkitTransition = "500ms ease-in-out";
first.style.color = "rgba(0,0,0,0)";
first.style.border = "none";
second.style.height = "300px";
second.style.visibility = "visible";
second.style.webkitTransition = "500ms ease-in-out";
second.style.color = "rgba(0,0,0,1.0)";
second.style.border = "1px solid #7CADB6";
second.style.borderTop = "none";
third.style.height = "0";
third.style.visibility = "hidden";
third.style.webkitTransition = "500ms ease-in-out";
third.style.color = "rgba(0,0,0,0)";
third.style.border = "none";
});
third.parentNode.childNodes[9].addEventListener("click",function(){
first.style.height = "0";
first.style.visibility = "hidden";
first.style.height = "0";
first.style.visibility = "hidden";
first.style.webkitTransition = "500ms ease-in-out";
third.style.height = "300px";
third.style.visibility = "visible";
third.style.webkitTransition = "500ms ease-in-out";
third.style.color = "rgba(0,0,0,1.0)";
third.style.border = "1px solid #7CADB6";
third.style.borderTop = "none";
second.style.height = "0";
second.style.visibility = "hidden";
second.style.webkitTransition = "500ms ease-in-out";
second.style.color = "rgba(0,0,0,0)";
second.style.border = "none";
});
});