JSFiddle - React, Tailwind, and code Playground
HTML
<div>
<div>
<button type="submit" id="clicker">Click me!</button>
</div>
<div class="show-hide">
<div>
<a href="#">Link to one place</a>
<br>
<a href="#">Another link</a>
</div>
</div>
</div>
CSS
.show-hide
{
display:none;
margin: 0;
padding: 0;
clear:both;
}
#clicker /*style this button however you want*/
{
background: #ddd;
border: 1px solid #ccc;
color: #333;
}
JavaScript
$(function() {
$("#clicker").click(function() {
$(".show-hide").slideDown("slow");
}, function() {
if(!$(this).data('pinned'))
$(".show-hide").slideUp("slow");
});
$("#clicker").click(function() {
var pin = $(this).data('pinned');
$(this).data('pinned', !pin);
if(pin) $(".show-hide").slideUp("slow");
});
});