JSFiddle - React, Tailwind, and code Playground

by darcyclarke

HTML

<div class="widgetContainer">
    <div class="widget">
        <p>This is important!</p>
        <a href="#">close</a>
    </div>
    <div class="widget hide">
        <p>Today is Eat Pretzels day!</p>
    </div>
</div>

<div class="widgetContainer">
    <div class="widget">
        <p>What's your flavour?</p>
        <a href="#">close</a>
    </div>
    <div class="widget hide">
        <p>Is it hot in here or just me?</p>
    </div>
</div>

CSS

.widgetContainer {
    border:solid 1px #ccc;
    padding:20px;
    margin:20px;
    display:block;
}
.widget {
    background-color:#fafafa;
    display:block;
}
.hide {
    display:none;   
}

JavaScript

$('.widget a').bind('click',function(e){
   e.preventDefault();
   $(this).parent().fadeOut(200, function(){
       $(this).parent().find('.hide').fadeIn(200);
   });
});