JSFiddle - React, Tailwind, and code Playground

by Brian Chang

HTML

<div id="layer1">
    <a href="#" onclick="afficher()" id="layer3">open here</a>
</div>

<div id="layer2">
    <ul>
            <li>Hi</li>
            <li>me</li>
            <li>too</li>
            <li><a href="#" onclick="fermer()">Close</a></li>
    </ul>
</div>

CSS

#layer1 {     
visibility : visible;     
position : relative;     
}     

#layer2 {     
visibility : hidden;     
position : absolute;     
}

JavaScript

function afficher() {  
document.getElementById('layer2').style.visibility ='visible';document.getElementById('layer2').style.position ='relative';  
document.getElementById('layer3').style.visibility='hidden';  
}  
       
function fermer() {  
document.getElementById('layer2').style.visibility ='hidden';  
document.getElementById('layer2').style.position ='absolute';  
document.getElementById('layer3').style.visibility='visible';  
}