JSFiddle - React, Tailwind, and code Playground

by joycse06

HTML

<html>
    <head>
     
    </head>
    <body>
        <div class="box" id="b1">
            <a href="#">click to show content</a>
            
            <div class="content">
                here is content here is content here is content 
                <div class="button" id="b2">remove content</div>
            </div
    </body>
</html>

CSS

.box{
    width:200px;
    height: 200px;
    background-color: black;
    padding:10px;
    
}

.content{
    width:100px;
    height: 150px;
    background-color: green;
    padding: 10px;
    margin:10px;
    display:none;
}
.button{
    background-color: red;
    padding:5px;
    cursor:pointer;
    margin:4px;
}

JavaScript

$(document).ready(function(){
 
    
     $('#b1').click(function(){
        
           $('.content').css({"display":"block"});
    });
    
    $('#b2').click(function(e){
           e.stopPropagation();
           $('.content').css({"display":"none"});
    });
    
    
});