JSFiddle - React, Tailwind, and code Playground
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Pulldown Menu Test</title>
</head>
<body>
<dl class="menu">
<dt class="topItem">All cats/subs</dt>
<dd class="subItem">Option one A</dd>
<dd class="subItem">Option two A</dd>
<dd class="subItem">Option three A</dd>
</dl>
</body>
</html>
CSS
.subItem { display: none; }
JavaScript
$(function() {
var $topItem = $('.topItem');
var $subItems = $('.subItem');
$topItem.bind('click', function() {
$subItems.toggle();
});
$subItems.bind('click', function() {
$topItem.text($(this).text());
$subItems.toggle();
});
});