JSFiddle - React, Tailwind, and code Playground

by troythompson

HTML

<a id="headermile" href="#">Milestones</a>

<div id="milestoneheader" class="hide">
    <ul>
        <li>List Item</li>
    </ul>
</div>

CSS

.hide{
    display:none;
}
#headermile{
    display:block;
    width:400px;
    padding:10px;
    background:#137;
    color:#fff;
    text-decoration:none;
    border:1px solid #000;
}
#milestoneheader{
    width:400px;
    height:100px;
    padding:10px;
    background:#fcfcfc;
    border:1px solid #000;
}

JavaScript

jQuery(document).ready(function($) {

    $('#headermile').click(function(event) {
            event.preventDefault();
            $("#milestoneheader").removeClass("hide");
        });

        $(document).on('click', function(event) {
            var container = $("#milestoneheader");
            var button = $("#headermile");
            if (!container.is(event.target) && container.has(event.target).length === 0 && !button.is(event.target)) {
                $("#milestoneheader").addClass("hide");
            }
        });
    });