JSFiddle - React, Tailwind, and code Playground

by edgardo400

HTML

<div id="boxes">
    <div class="blocked">
        <p>
            <a href="http://google.com">
                <img id="btn1" class="alignleft size-full wp-image-112" title="poisoncontrol" src="http://testdomain.edgardoroldanonline.com/wp-content/uploads/2012/03/poisoncontrol.jpg"
                alt="" width="300" height="239" />
            </a>
            <a href="http://testdomain.edgardoroldanonline.com/wp-content/uploads/2012/03/visitvet.jpg">
                <img id="btn2" class="alignleft size-full wp-image-113" title="visitvet" src="http://testdomain.edgardoroldanonline.com/wp-content/uploads/2012/03/visitvet.jpg"
                alt="" width="300" height="239" />
            </a>
        </p>
        <p>
            <a href="http://testdomain.edgardoroldanonline.com/wp-content/uploads/2012/03/nutrition.jpg">
                <img id="btn3" class="alignleft size-full wp-image-114" title="nutrition" src="http://testdomain.edgardoroldanonline.com/wp-content/uploads/2012/03/nutrition.jpg"
                alt="" width="300" height="239" />
            </a>
        </p>
    </div>
    <div id="box1" class="box">
        <div style="height: 335px; width: 945px; border: 6px solid #d7c3a5;">
            <h1>
                Cat Poison Control
            </h1>
            <ul>
                <li style="list-style-position: outside; list-style-image: url('http://testdomain.edgardoroldanonline.com/wp-content/uploads/2012/04/35px-Black_Cat-icon.png');">
                    <a class="hoverlink" href="http://www.catster.com/cat-health-care/cat-deshedding-tool" data-img="http://testdomain.edgardoroldanonline.com/wp-content/uploads/2012/04/desheddingtool493x335.jpg">
                        What Does a De-Shedding Tool Do?
                    </a>
                </li>
                <li style="list-style-position: outside; list-style-image: url('http://testdomain.edgardoroldanonline.com/wp-content/uploads/2012/04/35px-Himalayan_Cat-icon.png');">
                   ...

CSS

.box { float:left; margin:5px 10px 5px 0; display:none; }

#log { clear:left; }

h1, h2, h3, h4, h5, h6 {
    color: #847948;
    font-weight: normal;
}

#theImg {
    float:right;
    position:relative;
    top: -62px;
    
}

JavaScript

jQuery(function(){
    jQuery('#btn1').click(function() {


        function complete() {
          jQuery('#btn1');
        }


        jQuery('#box1').fadeOut();
        jQuery('#box2').fadeOut();    
        jQuery('#box1').fadeIn(1600, 'linear', complete);
   
    });

    jQuery('.btn2').click(function() {
    jQuery('#box1').fadeOut();
  
    jQuery('#log').empty();
    });
    jQuery('.blocked a').click(function(event) {
  event.preventDefault();
  jQuery('<div/>')
});
   

    jQuery('#btn2').click(function() {
    
            function complete() {
          jQuery('#btn2');
        }


        jQuery('#box1').fadeOut();
        jQuery('#box2').fadeOut();    
        jQuery('#box2').fadeIn(1600, 'linear', complete);
   
    });

    jQuery('.btn2').click(function() {
    jQuery('#box2').fadeOut();
  
    jQuery('#log').empty();
    });  
    
jQuery('#boxes').bind('click', function(event) {

     var currentID = jQuery(event.srcElement).attr('id');
   
    jQuery(currentID).delegate("a", "hover", function(event){

        var $img = jQuery(this).parent("li").find('img');
        var image = jQuery(this).attr('data-img');
         jQuery('.defaultimg').stop(true, true).fadeOut();
        if( event.type === 'mouseenter' ) {
         
            if($img.length){
                $img.show();
               
            }else{
                jQuery(this).parent("li").append('<img id="theImg" src="' + image + '" />');
            }
            
        }else{
            if($img){
              $img.hide();  
            }
             jQuery('.defaultimg').stop(true, true).fadeIn();
        }
    }); 
});
});