JSFiddle - React, Tailwind, and code Playground
HTML
<div class="pulldown">
<a href="javascript:;" class="select">All cats/subs</a>
<div class="options">
<a href="javascript:;">Option one A</a>
<a href="javascript:;">Option two A</a>
<a href="javascript:;">Option three A</a>
<a href="javascript:;">Option four A</a>
</div>
</div>
JavaScript
$(document).ready(function() {
/*Grab the div into a variable*/
var Pulldown = $('div.pulldown');
/*Set up your event handlers*/
$('.options a', Pulldown).click(function(){
var value = $(this).text();
$('.select',Pulldown).html(value);
});
/*Toggle the pulldown*/
Pulldown.toggle(function() {
Pulldown.css('z-index','110');
$('.options', Pulldown).css('z-index','100').show('fast');
}, function(){
Pulldown.css('z-index','10');
$('.options', Pulldown).css('z-index','0').hide('fast');
});
});