JSFiddle - React, Tailwind, and code Playground

by blineberry

HTML

<div id="element" tabindex="1">
    <div class="content">Lorem ipsum.</div>
    <div class="control show">Show</div>
    <div class="hide" tabindex="2">
        <div class="control">Hide</div>
    </div>
</div>

CSS

/* Start */
#element .content {
    height: 0;
    overflow: hidden;
}
#element .hide { 
    display: none; 
}

/* Focus */
#element:focus .content { 
    height: auto; 
    overflow: hidden;
}
#element:focus .show { 
    display: none; 
}
#element:focus .hide { 
    display: block; 
}


/* Visual Styles */
#element { outline: 0; }
.control {
    cursor: pointer;
    color: blue;
    text-decoration: underline;
}