Webデザインの勉強と製作 | あかとんぼ

フェリカテクニカルアカデミーの学習をベースに、Webについての勉強と製作の過程をまとめています。

[jQuery]⑧横アコーディオンパネル

画像の横アコーディオンパネル

  • 定義リストを利用する
  • タイトル部分をクリックすると、画像とともに横にスライドする
  • 情報の多くしたいヘッダー画像などに利用したい

f:id:akatonbo_web:20150527025740p:plain

<!doctype html>
<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(){
  /* 1枚目ddを非表示 */
  $("dd:not(:first)").css("width","0px");
  /* 1枚目dtにselecedクラスを付与 */
  $("dt:first img").addClass("selected");
  /* dtをクリックしたとき… */
  $("dt").click( function(){
  /* クリックしたdtの、次のddが非表示(0px)ならば… */
  if($("+dd",this).css("width") == "0px"){
    /* ①selectedされていたdtのddを非表示 */
    $("dt:has(.selected) +dd").animate({"width": "0px"},400);
    /* ②次のddを表示 */
    $("+dd",this).animate({"width":"600px"},400);
    /* それまでのselectedクラスのpngを変更、クラスを除去 */
    $("dt img.selected").attr("src", "img/"+ $("dt img.selected").attr("alt") +".png" )
    .removeClass("selected");
    /* クリックしたdtにselectedクラスを付与、pngを変更 */
    $("img",this).addClass("selected")
    .attr("src", "img/"+ $("img",this).attr("alt") +"_selected.png" );
    }
  });
});
</script>
</body>
</html>
@charset "UTF-8";
/* reset */
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;
}