JSFiddle - React, Tailwind, and code Playground

by Tahir Ahmed

HTML

<section>
    <input type="checkbox" id="checkbox_id" />
    <label for="checkbox_id">Click me</label>
    <div>
        <a href="">This is the first link</a>
        <a href="">This is the second link</a>
    </div>
</section>

CSS

* {
    margin: 0;
}
section {
    position: relative;
    padding: 20px;
    background: yellow;
}
input[type="checkbox"] {
    display: none;
}
label, a {
    height: 30px;
    padding: 10px 0;
    margin: 10px;
}
label {
    display: block;
    background: tomato;
    cursor: pointer;
    width: 100%;
    position: absolute;
    top: 0;
    transition: top .3s ease;
}
.label--hovered {
    background: green;
}
input[type="checkbox"]:checked + label {
    top: 100%;
}
a {
    display: block;
    background: tomato;
}
a:first-child {
    margin-top: 50px;
}

JavaScript

$(document).ready(function(){
    $('label').hover(function(){
        $(this).removeAttr('style').addClass('label--hovered');
    }, function(){
        $(this).css('cursor', 'default').removeClass('label--hovered');
    }).click(function(){
        $(this).trigger('mouseleave');
    });
});