※ ChatGPTを利用し、要約された質問です（原文：jqueryによるアコーディオン表示）
jqueryによるアコーディオン表示の修正方法
http://liginc.co.jp/web/js/jquery/34048
上記サイトを参照してjqueryによるアコーディオン表示をやってみました。
上記サイトのデモではアコーディオンメニューをクリックするとその下に
「アコーディオンメニューが開く」という文字列が表示されます。
しかし、私の環境ではその文字列がアコーディオンメニューより右にずれて表示(下記表示イメージ)
されてしまいます。
【表示イメージ】
アコーディオンメニュー１
アコーディオンメニュー
アコーディオンメニュー２
アコーディオンメニュー
アコーディオンメニュー３
アコーディオンメニュー
下記が実際に書いたHTMLなのですがCSSをどのように修正すればデモのように
アコーディオンメニューが表示されますでしょうか。
また、下記サンプルではアコーディオンメニュー１が開いたときに表示する文字列を
改行しているのですが<BR>タグで開業すると１行目と２行目の間が大きく開いてしまいます。
line-height を調整すれば行間の隙間が調整できるのですが１行目の位置まで変更
されてしまいます。１行目の位置はそのままに、行間の隙間を調整することはできますでしょうか。
【HTML】
<html>
<head>
<meta charset="UTF-8" />
<script type="text/javascript" src="../jquery-1.6.1.min.js"></script>
<script type="text/javascript">
$(function(){
$("#acMenu dt").click(function() {
$(this).next().slideToggle();
$(this).toggleClass("active");
});
});
</script>
<title>CSS</title>
<style type="text/css">
#acMenu dt{
display:block;
width:250px;
height:50px;
line-height:50px;
text-align:center;
border:#666 1px solid;
cursor:pointer;
background:url(../images/i_swich.png) 220px -69px no-repeat;
padding-right:15px;
}
#acMenu dd{
background:#f2f2f2;
width:250px;
height:150px;
line-height:50px;
text-align:center;
border:#666 1px solid;
display:none;
}
#acMenu dt.active{
background:url(../images/i_swich.png) 220px 18px no-repeat;
}
</style>
</head>
<body>
<dl id="acMenu">
<dt>アコーディオンメニュー1</dt>
<dd>アコーディオンメニュー1が開く。<BR>改行した。</dd>
<dt>アコーディオンメニュー2</dt>
<dd>アコーディオンメニュー2が開く。</dd>
<dt>アコーディオンメニュー3</dt>
<dd>アコーディオンメニュー3が開く。</dd>
</dl>
</body>
</html>
お礼
ご回答ありがとうございます。 教えていただいた方法でうまくいきました。 ありがとうございました。