JSFiddle - React, Tailwind, and code Playground

by tea4two

HTML

<h1>通常アコーディオンメニュー</h1>
<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が効かなかった場合のことを考えて、見えた状態から隠す。
$allDT.css('cursor','pointer'); //マウスカーソルの見た目を変える

$allDT.click(function() {
    var $dt = $(this),
        $dd = $dt.next(); // next()メソッド 次の兄弟要素を取得
    
    console.log('$ddの状態は？ ', $dd.is(':visible') );
    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);
});