jquery - 1つのdivのみを表示しながら複数のdivを切り替えます.jqueryアコーディオンの可能性はありますか?

Question

現在、ユーザーがリンクをクリックすると、$('#user');スライドアウトします。ユーザーが別の (同じリンクではない)$('.more-info-arrow').find('a')リンクをクリックすると、前のユーザーの情報は消えますが、2 回目の要求では再表示されません。が表示されている場合にのみこれを実行したいと思い$('#user');ます。

http://jsfiddle.net/QSapW/

=======================Jquery====================

            //User detail information
        $('.more-info-arrow').find('a').live('click', function () {
            var $this = $(this);
            var user = $('#user');
            var userInfo = $('#user-info');

            // If display is none, that means it is hidden
            if (user.css('display') == 'none') {
                $this.addClass('active');
                user.hide().animate({
                    width: 'toggle'
                }, 400, function () {
                    userInfo.fadeIn('fast');
                });
            }

            // Second Click
            else {
                $this.removeClass('active');
                userInfo.fadeOut('fast', function () {
                    user.animate({
                        width: 'toggle'
                    }, 400);
                });
            }
        });

Answer 1

HTML5 を使用している場合は、新しいdata属性を利用できます。

デモはこちら: http://jsfiddle.net/QSapW/4/

HTML

<div class="item-info clearfix" data-userId="1">
    <div class="more-info-arrow"><a title="" href="javascript:;">&gt;&gt;</a></div>
</div>
<div class="item-info clearfix" data-userId="2">
    <div class="more-info-arrow"><a title="" href="javascript:;">&gt;&gt;</a></div>
</div>

<div class="user" id="user-box-1">
    <div class="user-info">
        <p>hello world</p>
    </div>
</div>
<div class="user" id="user-box-2">
    <div class="user-info">
        <p>good-bye world</p>
    </div>
</div>​

JS

//User detail information
$('.more-info-arrow').on('click', 'a', function () {
    var $this    = $(this),
        $item    = $this.parents('.item-info'),
        userId   = $item.data('userid'),
        user     = $('#user-box-' + userId),
        userInfo = $('.user-info', user);

    // If display is none, that means it is hidden
    if (user.is(':visible') === false) {
        $this.addClass('active');
        user.animate({
            width: 'toggle'
        }, 400, function () {
            userInfo.fadeIn('fast');
        });
    }

    // Second Click
    else {
        $this.removeClass('active');
        userInfo.fadeOut('fast', function () {
            user.animate({
                width: 'toggle'
            }, 400);
        });
    }
});​

CSS

.user {
    display:none;
    width:100px;
    height:100px;
    background:red;
}