『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それぞれどのように変更すれば実装が可能か、どなたか詳しい方がいらっしゃいましたら、お知恵を拝借したく存じます。
どうぞよろしくお願い申し上げます。
お礼
書き込みありがとうございます。 改変の許可についてはまったく考えが及びませんでした。確かに許可がなければいけませんね。 潔くこのアコーディオンを諦めて、教えてくださったサイトをたよりに別のスクリプトを探してみます。 ありがとうございました。