<html>
<head>
<meta charset="utf-8">
<title>無題ドキュメント</title>
<script src="jquery-1.7.2.min.js"></script>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
dl{
width: 400px;
margin:50px auto;
}
dl dt{
background:#743ced;
border-bottom:1px solid #fff;
cursor:pointer;
}
dl dd{
border:1px solid #7cadb6;
border-top:none;
height: 300px;
}
p{
text-align: center;
font-size: 24px;
color: #F00;
}
</style>
<script>
$(function(){
$("dd:not(:first)").css("display","none");
$("dl dt").click(function(){
if($("+dd",this).css("display")=="none"){
$("dd").slideUp("slow");
$("+dd",this).slideDown("slow");
}
});
});
</script>
</head>
<body>
<dl>
<dt>text1</dt>
<dd>
<p><img src=""height="300"width="300"alt="画像"></p>
</dd>
<dt>text2</dt>
<dd>
<p><img src="http://cdn-ak.f.st-hatena.com/images/fotolife/u/ululun/20080114/20080114121000.jpg"height="300"width="300"alt="画像"></p>
</dd>
<dt>text3</dt>
<dd>
<p><img src=""height="300"width="300"alt="画像"></p>
</dd>
<dt>text4</dt>
<dd>
<p><img src=""height="300"width="300"alt="画像"></p>
</dd>
</dl>
</body>
</html>
