ここhttp://ascii.jp/elem/000/000/498/498710/index-6.htmlを参考にして、
アコーディオンパネルを作っていたのですが、どうもうまく動きません。
クリックしても、パネルが閉じたり開いたりしてくれないのです。
上記リンクにあるサンプルページのものはクリックしても動くのですが、
自分がローカルで作ったものは動きません。
javascriptはもちろん有効にしてあります。
ソースコードを貼りますので、どこがおかしいか指摘していただけると助かります。
<html lang="ja">
<head>
<title>jqueryテストページ</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta http-equiv="content-style-type" content="text/css">
<meta http-equiv="content-script-type" content="text/javascript">
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery","1");</script>
<script type="text/javascript">google.load("jqueryui","1");</script>
<link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.0/themes/blitzer/jquery-ui.css" rel="stylesheet">
<style type="text/css">
<!--
div.dragresize{
width:100px;
height:100px;
background-color:blue;
}
*{
margin:0px;
padding:0px;
}
dl{
width:300px;
}
dl dt{
background-color:green;
border:2px solid blue;
color:black;
cursor:pointer;
}
dl dd{
height:100px;
background-color:#999999;
border:2px solid gray;
border-top:none;
}
-->
</style>
<script type="text/javascript">
<!--
//ドラッグリサイズスクリプト
$(function(){
$("div.dragresize").draggable().resizable();
});
$(function(){
//まず最初以外は全部閉じる
$("dd:not(:first)").css("display","none");
$("dl dt").click(function(){
//クリックされた次のDD要素が隠れていたら
if($("+dd",this).css("display")=="none"){
//まず全部閉じる
$("dd").slideUp("slow");
//クリックした次のdd要素だけ表示
$("+dd",this).slideDown("slow");
}
});
});
//-->
</script>
</head>
<body>
<div class="dragresize">
ドラッグテスト
</div>
<br>
<dl>
<dt>ラルクアンシエル</dt>
<dd>大阪で結成されたバンド</dd>
<dt>hyde</dt>
<dd>ラルクアンシエルのボーカリスト</dd>
<dt>ken</dt>
<dd>ラルクアンシエルのギタリスト</dd>
<dt>tetsuya</dt>
<dd>ラルクアンシエルのベーシストにしてリーダー</dd>
<dt>yukihiro</dt>
<dd>ラルクアンシエルのドラマー</dd>
</dl>
</body>
</html>