JSFiddle - React, Tailwind, and code Playground

by tea4two

HTML

<dl id="menu">
    <dt>メニュー1</dt>
    <dd>
        some text<br>
        some text<br>
        some text
    </dd>
    <dt>メニュー2</dt>
    <dd>
        some text<br>
        some text<br>
        some text
    </dd>
    <dt>メニュー3</dt>
    <dd>
        some text<br>
        some text<br>
        some text
    </dd>
</dl>

CSS

#menu {
    width: 200px;
}
dt, dd {
    padding: 5px;
}
dt {
    background-color: lightgreen;
    color: #fff;
    font-weight: bold;
}
dt.opened {
    background-color: green;
}

JavaScript

var $menu = $('#menu'),
    $allDT = $menu.find('dt'),// find()は子要素セレクタ検索
    $allDD = $menu.find('dd'),
    _speed = 200;

$allDD.hide(); // もしJSが効かなかった場合のことを考えて、見えた状態から隠す。CSSではやらない。
$allDT.css('cursor','pointer'); //マウスカーソルの見た目を変える

$allDT.each(function(i, e){ 
        var $dt = $(this),
            $dd = $dt.next(); // next()メソッド 次の兄弟要素を取得
    $dt.click(function() {
        //console.log('$ddの状態は？ ', $dd.is(':visible') );
        console.log( '何番目の$dt? ',  $dt.index('dt') );
        if( $dd.is(':visible') ) { //:visible 擬似クラスチェック
            //セレクタについて http://goo.gl/GIE2IE
            $dt.removeClass('opened');
            $dd.slideUp(_speed);
            return; //処理をストップする
        }
        $allDT.removeClass('opened');
        $allDD.slideUp(_speed);
        $dt.addClass('opened');
        $dd.slideDown(_speed);
    });
});