- 定義リストを利用する
- タイトル部分をクリックすると、画像とともに横にスライドする
- 情報の多くしたいヘッダー画像などに利用したい
<html>
<head>
<meta charset="UTF-8">
<title>イメージアコーディオン・横</title>
<link rel="stylesheet" href=“acord2.css">
<script src="js/jquery-1.11.3.min.js"></script>
</head>
<body>
<div id="container">
<dl>
<dt><img src="img/title01_selected.png" alt="title01"></dt>
<dd><img src="img/01.jpg" alt=""></dd>
<dt><img src="img/title02.png" alt="title02"></dt>
<dd><img src="img/02.jpg" alt=""></dd>
<dt><img src="img/title03.png" alt="title03"></dt>
<dd><img src="img/03.jpg" alt=""></dd>
</dl>
</div>
<script>
$(function(){
$("dd:not(:first)").css("width","0px");
$("dt:first img").addClass("selected");
$("dt").click( function(){
if($("+dd",this).css("width") == "0px"){
$("dt:has(.selected) +dd").animate({"width": "0px"},400);
$("+dd",this).animate({"width":"600px"},400);
$("dt img.selected").attr("src", "img/"+ $("dt img.selected").attr("alt") +".png" )
.removeClass("selected");
$("img",this).addClass("selected")
.attr("src", "img/"+ $("img",this).attr("alt") +"_selected.png" );
}
});
});
</script>
</body>
</html>
@charset "UTF-8";
html,body,h1,h2,dl,dt,dd{
margin: 0;
padding: 0;
line-height:1.0;
}
img{
border: none;
vertical-align:bottom;
}
#container{
margin: 40px auto;
width: 840px;
height: 400px;
overflow: hidden;
}
dl{
width: 2040px;
height: 400px;
overflow: hidden;
}
dt{
float: left;
}
dt img {
cursor: pointer;
width: 80px;
height: 400px;
}
dt img.selected{
cursor: default;
}
dd{
float: left;
}
dd img {
width: 600px;
height: 400px;
}