jQuery 横のアコーディオン

ｊQuery 

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>横向きアコーディオン</title>
<link rel="stylesheet" href="style.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
<body>
<div>
<dl>
<dt id="page1"><span>Tokyo</span></dt>
<dd><img src="img/tokyo.jpg" width="600" height="500" alt="tokyo"></dd>
<dt id="page2"><span>London</span></dt>
<dd><img src="img/london.jpg" width="600" height="500" alt="london"></dd>
<dt id="page3"><span>New York</span></dt>
<dd><img src="img/ny.jpg" width="600" height="500" alt="new york"></dd>
<dt id="page4"><span>Hong Kong</span></dt>
<dd><img src="img/hk.jpg" width="600" height="500" alt="hong knog"></dd>
<dt id="page5"><span>Paris</span></dt>
<dd><img src="img/paris.jpg" width="600" height="500" alt="paris"></dd>
</dl>
</div>
<script>
$(function(){
$("dd:not(:first)").css("width","0px");
$("dt:first span").addClass("selected");
$("dl dt").click(function(){
  if($("+dd",this).css("width")=="0px"){
  $("dt:has(.selected)+dd").animate({"width":"0px"});
  $("+dd",this).animate({"width":"600px"});
  $("dt span").removeClass("selected");
  $("span",this).addClass("selected");
  }
  }).mouseover(function(){
  $("span",this).addClass("over");
  }).mouseout(function(){
  $("span",this).removeClass("over");
  });
});
</script>
</body>
</html>

@charset "utf-8";
body{
  background: #111;
  }
div{
  width: 1105px;
  height: 500px;
  margin: 50px auto;
  overflow: hidden;
}
dl{
  width: 1105px;
  height: 500px;
}
dt{
  width: 100px;
  height:500px;
  float:left;
  border-right: 1px solid #777;
}
dt span{
  display: block;
  width: 100%;
  height: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-indent: 100%;
}
dt span.over{
  cursor: pointer;
}
dt span.selected{
  cursor: default;
}
dt#page1 span{
  background: url(img/tokyo_o.jpg);
}
dt#page2 span{
  background: url(img/london_o.jpg);
}
dt#page3 span{
  background: url(img/ny_o.jpg);
}
dt#page4 span{
  background: url(img/hk_o.jpg);
}
dt#page5 span{
  background: url(img/paris_o.jpg);
}
dd{
  margin: 0;
  width: 600px;
  height: 500px;
  float: left;
  overflow: hidden;
}