『JavaScript Accordion』について

質問

『JavaScript Accordion』について

初めて投稿致します。
『JavaScript Accordion』（http://www.leigeber.com/2008/10/animated-javascript-accordion/の「Click here to download the source code.」でダウンロード可）を自サイトに実装しようとしたのですが、もともとの形式が「dl dt dd」形式のため、うまく実装できませんでした。

実装したい箇所は下記の通りです。

<!-- BEGIN news -->
<h3>NEWS</h3>
<div class="main">
<ul class="news">
<li>2010/01/05 : 更新5</li>
<li>2010/01/04 : 更新4</li>
<li>2010/01/03 : 更新3</li>
</ul>
</div>
<!-- END news -->

<!-- BEGIN old -->
<h3>OLD</h3>
<div class="main">
<ul class="news">
<li>2010/01/02 : 更新2</li>
<li>2010/01/01 : 更新1</li>
</ul>
</div>
<!-- END old -->

<!-- BEGIN news -->から<!-- END news -->は常時表示、<!-- BEGIN old -->から<!-- END old -->は通常非表示、見出しの「OLD」をクリックすることで表示or非表示が切り替わるようになるのが希望です。

また上記タグの箇所は以下の通りcssを設定しているのですが、実装するにあたって何か追加する必要はありますでしょうか？

h3{
font-size:80%;
font-family:Verdana,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro W3","メイリオ",Meiryo,"ＭＳ Ｐゴシック","MS PGothic",Osaka,Chicago,sans-serif;
font-weight:bold;
color:#ef004a;
letter-spacing:4px;
margin:0 5px 10px 14px;
}

div.main{
font-size:76%;
font-family:Verdana,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro W3","メイリオ",Meiryo,"ＭＳ Ｐゴシック","MS PGothic",Osaka,Chicago,sans-serif;
line-height:150%;
padding:0 10px 15px 15px;
}

ul.news{
font-size:100%;
font-family:Verdana,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro W3","メイリオ",Meiryo,"ＭＳ Ｐゴシック","MS PGothic",Osaka,Chicago,sans-serif;
padding:0 10px 10px 15px;
}
ul.news li{
list-style-type:disc;
}

スクリプト、htmlタグ、cssそれぞれどのように変更すれば実装が可能か、どなたか詳しい方がいらっしゃいましたら、お知恵を拝借したく存じます。
どうぞよろしくお願い申し上げます。

回答No.1

kuzumiHK · ベストアンサー

ご指定のJavaScript Accordionで作ってみると、
動く項目が一つのときスライドアップの様子を見た目で確認することができません。

<style type="text/css">
dl{
margin:0;
padding:0;
}
dt{
font-size:80%;
font-family:～;
font-weight:bold;
color:#ef004a;
letter-spacing:4px;
margin:0 5px 10px 14px;
padding:0;
}
dl#slider dt{
cursor:pointer;
}
dd{
margin:0;
padding:0;
}
dd ul.news{
font-size:76%;
font-family:～;
line-height:150%;
padding:0 20px 25px 30px;
}
dd ul.news li{
list-style-type:disc;
}
</style>
<script type="text/javascript" src="script.js"></script>
<dl>
<dt>NEWS</dt>
<dd>
<ul class="news">
<li>2010/01/05 : 更新5</li>
<li>2010/01/04 : 更新4</li>
<li>2010/01/03 : 更新3</li>
</ul>
</dd>
</dl>
<dl id="slider">
<dt>OLD</dt>
<dd>
<ul class="news">
<li>2010/01/02 : 更新2</li>
<li>2010/01/01 : 更新1</li>
</ul>
</dd>
</dl>
<script type="text/javascript">
var slider=new accordion.slider("slider");
slider.init("slider",0,"open");
</script>

そこで、jqueryを使って同様のことを再現してみました。

<style type="text/css">
dl{
margin:0;
padding:0;
}
dt{
font-size:80%;
font-family:～;
font-weight:bold;
color:#ef004a;
letter-spacing:4px;
margin:0 5px 10px 14px;
padding:0;
}
dt.accordion{
cursor:pointer;
}
dd{
margin:0;
padding:0;
}
dd ul.news{
font-size:76%;
font-family:～;
line-height:150%;
padding:0 20px 25px 30px;
}
dd ul.news li{
list-style-type:disc;
}
</style>
<dl>
<dt>NEWS</dt>
<dd>
<ul class="news">
<li>2010/01/05 : 更新5</li>
<li>2010/01/04 : 更新4</li>
<li>2010/01/03 : 更新3</li>
</ul>
</dd>
<dt class="accordion">OLD</dt>
<dd>
<ul class="news">
<li>2010/01/02 : 更新2</li>
<li>2010/01/01 : 更新1</li>
</ul>
</dd>
</dl>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(function(){
$("dt.accordion").click(function(){
if($("dt.accordion + dd").css("display")=="none"){
$("dt.accordion + dd").slideDown("fast");
}
else{
$("dt.accordion + dd").slideUp("fast");
}
});
});
</script>

dtにclass="accordion"を追加すると、その直後にあるddの内容をアコーディオンするようにしています。

お礼

お返事が遅くなり、大変申し訳ございませんでした。
ご回答の通りやってみましたら、うまくできました。
お忙しい中ご回答くださり、本当にありがとうございました！