jquery - カスタム jQuery アコーディオンと次の div の非表示

Question

私はカスタムアコーディオンスクリプトを持っています - http://jsfiddle.net/nJpNb/2/

私ができるようにしたいのは、$(".more") がクリックされたときに前/次の div を非表示にすることです。現在、すべてのパネルが開いたままなので、スクリプトはほとんど機能します。

ここで何か助けていただければ幸いです。

ありがとう

Answer 1

追加するだけ

$(".newsBody").hide();
$('.newsTeaser').show();

の最初の行に$(".more").click(function() {

デモ：http：//jsfiddle.net/nJpNb/5/

ただし、アイテムをキャッシュしてください。

Answer 2

.more以下のように、クリック内に2行以下を追加してみてください。

//hide all others and show newsTeaser
$newsItem.find('.newsBody').hide();
$newsItem.find('.newsTeaser').show();

デモ

完全なコード：

$(".newsBody").hide();
var $newsItem = $('.newsItem');
$(".more").click(function() {

    //hide all others and show newsTeaser
    $newsItem.find('.newsBody').hide();
    $newsItem.find('.newsTeaser').show();

    var $parent = $(this).parent();
    $parent.hide();
    $parent.parent().find(".newsBody").show();
});
$(".less").click(function() {
     var $parent = $(this).parent();
    $parent.hide();
    $parent.parent().find(".newsTeaser").show();

});

Answer 3

各セクションにIDを設定します（したがって、セクションにはクラスとIDがあります）。次に、誰かがセクション2を選択すると、セクション1と3が自動的に非表示になります。