jQueryあれこれ

親兄弟子要素への操作

HTML

<table>
    <tr class="mychuno-list">
        <td>
		……
		<!-- HTML5 カスタムデータ属性「data-*」を用いる -->
		<input type="button" id="btn-display" value="開く" data-is-open="0">
        </td>
    </tr>
    <tr class="mychuno-detail" >
        <td>
		……
        </td>
    </tr>
</table>

Javascript(jQuery)

jQuery(function(){
  $('.btn-display').click(function(e){
    // HTML5 カスタムデータ属性「data-*」を取得する
    if($(this).data('is-open') === 0){
        var $this_chuno = $(this);
        $this_chuno.parents('.mychuno-list').next('.mychuno-detail').fadeIn('fast', function() {
            $this_chuno.data('is-open', 1);
            // ボタンの表示名を書き換える(要素のvalueを変更)
            $this_chuno.val('閉じる');
        });
    }else if($(this).data('is-open') === 1){
        var $this_chuno = $(this);
        $this_chuno.parents('.mychuno-list').next('.mychuno-detail').fadeOut('fast', function() {
            $this_chuno.data('is-open', 0);
            // ボタンの表示名を書き換える(要素のvalueを変更)
            $this_chuno.val('開く');
        });
    }
  });
});