webtips

JS

<script>
 $(function(){
 $("#acMenu dt").on("click", function() {
 $(this).next().slideToggle();
 $(this).toggleClass("active");//追加部分
 });
 });
</script>

html

<dl id="acMenu">
    <dt>アコーディオンメニュー1</dt>
    <dd>アコーディオンメニューが開く。</dd>
    <dt>アコーディオンメニュー2</dt>
    <dd>アコーディオンメニューが開く。</dd>
    <dt>アコーディオンメニュー3</dt>
    <dd>アコーディオンメニューが開く。</dd>
</dl>

CSS

#acMenu dt{
    display:block;
    width:185px;
    height:50px;
    line-height:50px;
    text-align:center;
    border:#666 1px solid;
    cursor:pointer;
    background:url(images/i_swich.png) 177px -69px no-repeat;
    padding-right:15px;
    }
#acMenu dd{
    background:#f2f2f2;
    width:200px;
    height:50px;
    line-height:50px;
    text-align:center;
    border:#666 1px solid;
    display:none;
    }
#acMenu dt.active{
    background:url(images/i_swich.png) 177px 18px no-repeat;
    }