jquery - アコーディオンのアクティブおよび非アクティブな見出し

Question

私はスタックオーバーフローからのユーザーの助けを借りて自分自身にいくつかのjQueryを教えるためにこのアコーディオンを作りました：http：//jsfiddle.net/LQsV5/

タブを変更する機能を追加するにはどうすればよいか疑問に思っていたので、タブを閉じると見出しの背景画像が灰色になり、アコーディオンを開くと上記の例のようになりますか？

ありがとうございました。

Answer 1

jsFiddleデモ

CSS（「。selected」クラスを作成し、目的の背景を設定します）：

#acc h3 {padding-left:5px; padding-top: 2px; font-weight:bold; margin-top:5px; color:#fff; font-size:11px;
    background: #777; /* HERE SET YOUR GRAY IMAGE */
}

#acc h3.selected{
    background:url("http://img.uefa.com/imgml/comp/u19/sprite_4-6-8.png") no-repeat scroll 0pt -50px transparent;
}

.selectedこのクラスをjQueryで切り替えるよりも：

$('.acc li h3').next('.acc-section').hide(); // remove that line if you hide them inside your CSS
$('.acc li h3').click(function() {
    var el = $(this).next('.acc-section');
    $('.acc li h3').removeClass('selected');
    check = (el.is(':visible')) ? el.slideUp() : ($('.acc-section').slideUp()) (el.slideDown().prev('h3').addClass('selected'));
});

私が使用したjQueryの内部に注意して$('.acc li h3').next('.acc-section').hide();
ください。ページ全体が読み込まれる前にスライダーがデフォルトで開いた状態で表示され、非表示になるのを確認したくない場合は、その行を削除してCSSに設定します。

.acc-section{display:hidden;}