JSFiddle - React, Tailwind, and code Playground

by amindunited

HTML

<div id="wart">
<div class="kiddle" id="kiddle_1" style="background-color:#00FFFF; display: block">One</div>
<div class="kiddle show" id="kiddle_2" style="background-color:#FF00FF; display: block">Two</div>
</div>

CSS

.kiddle{
position:absolute;
    top:5px;
    left: 5px;
width: 200px;
}

JavaScript

$(document).ready(function(){
        $('.kiddle').each(function(i, obj){
            $(obj).click(function(){
                if( $(this).is('.show') ){
                    $('.kiddle').addClass('show');
                    $(this).removeClass('show').hide('slow', function(){
                        $('.show').show('slow');
                    });
                }
          });
          
        });
    
    //console.log($('#kiddle')[0].style.filter);
    //if($('#kiddle')[0].style.filter){
        //$('#kiddle')[0].style.filter="progid:DXImageTransform.Microsoft.Alpha(opacity=50)";
        
       // $('#kiddle').css('filter' , "alpha(opacity = 5 )");
    //$('#kiddle').animate({'opacity':1});
    //} else { alert('fucker') }
});