JSFiddle - React, Tailwind, and code Playground

by ankitjc

HTML

<div id="aemcSlider">
    <ul>
        <li> <a class="aB" href="#">Show Small</a>

        </li>
        <li><a class="aA" href="#">Show Big</a>

        </li>
    </ul>
</div>
<div id="B">
    <div id="image">
        <img src="http://nuclearpixel.com/content/icons/2010-02-09_stellar_icons_from_space_from_2005/earth_128.png" alt="Packaging" width="195" hspace="0" vspace="0" border="0" title="Packaging" />
    </div>
</div>
<div id="A">
    <div id="image">
        <img src="http://nuclearpixel.com/content/icons/2010-02-09_stellar_icons_from_space_from_2005/earth_128.png" alt="Packaging" width="295" hspace="0" vspace="0" border="0" title="Packaging" />
    </div>
</div>

CSS

#B {
    float: left;
}

JavaScript

$(document).ready(function () {

    $(".aA").click(function () {
        $('#A').fadeIn(1000);
        $('#B').fadeOut(1000);
    });



    $(".aB").click(function () {
        $('#A').fadeOut(1000);
        $('#B').fadeIn(1000);
    });
});