JSFiddle - React, Tailwind, and code Playground

by JonNorman

HTML

<div class="container">

    <div class="container-left">
        <div class="container-photo"><img src="http://mynokiablog.com/wp-content/uploads/2012/02/bing.jpg" width="420" height="158" alt="" /></div>
        <div class="container-button"><a class="info-btn"></a></div>
        <div class="container-text">The is text info for 1st photo</div>    
    </div>
    <br/>

    <div class="container-right">
        <div class="container-photo"><img src="http://cdni.wired.co.uk/273x178/g_j/google_273x178.jpg" width="420" height="158" alt="" /></div>
        <div class="container-button"><a class="info-btn"></a></div>
        <div class="container-text">The is text info for 2nd photo</div>    
   </div>

</div>

CSS

.container {
    width:870px;
    display:block;    
}
.container-left {
    position:relative;
    float:left;
    width:420px;
    height:158px;    
}
.container-right {
    position:relative;
    float:right;
    width:420px;
    height:158px;    
}
.container-photo {
    position:absolute;
    top:0;
    left:0;
    z-index:10;    
}
.container-button {
    position:absolute;
    width:33px;
    height:19px;
    bottom:8px;
    right:8px;
    z-index:20;
}
.info-btn {
    display:block;
    width:33px;
    height:19px;
    background-image:url(http://www.justispublishing.com/news/thumbnails/info-button.gif);
    background-repeat:no-repeat;
    background-position:0 0;
    cursor:pointer;
}
.info-btn:hover {
    display:block;
    width:33px;
    height:19px;
    background-image:url(http://www.justispublishing.com/news/thumbnails/info-button.gif);
    background-repeat:no-repeat;
    background-position:0 -19px;
    cursor:pointer;    
}
.info-btn-active {
    display:block;
    width:33px;
    height:19px;
    background-image:url(http://www.justispublishing.com/news/thumbnails/info-button.gif);
    background-repeat:no-repeat;
    background-position:0 -38px;
    cursor:pointer;
}
.container-text {
    display:none;
    position:absolute;
    top:0;
    left:0;
    width:420px;
    height:158px;
    background-color:#FFF;
    overflow:hidden;    
    z-index:10;
}

JavaScript

$(document).ready(function() {
    $('.info-btn').click(function() {
        $('info-btn-active').not(this).removeClass('info-btn-active'); //remove the active class from all buttons but the current one;
        $(this).addClass('info-btn-active'); //add the active class to the current one
        $toShow = $(this).parent("div.container-button").siblings(".container-text"); //get the one to show
        $toShow.show(); //show it
        $toShow.animate({opacity: 1},1200);
        $(".container-text").not($toShow).animate({opacity: 0},1200);           
    });
});