JSFiddle - React, Tailwind, and code Playground

by salitrapraveen

HTML

<div id="content">

    <div id="image-box">
    
<ul >
    <li><input type="checkbox"/><p>Ubuntu 11.10 x86</p></li>
    <li><input type="checkbox"/><p>Ubuntu 11.10 x64</p></li>
    <li><input type="checkbox"/><p>Ubuntu 11.04 x86</p></li>
    <li><input type="checkbox"/><p>Ubuntu 11.04 x64</p></li>
    <li><input type="checkbox"/><p>Ubuntu 10.10 x86</p></li>
    <li><input type="checkbox"/><p>Ubuntu 10.10 x64</p></li>
    <li><input type="checkbox"/><p>Ubuntu 10.04 x86</p></li>
    <li><input type="checkbox"/><p>Ubuntu 10.04 x64</p></li>
    <li><input type="checkbox"/><p>Ubuntu 9.10 x86</p></li>
    <li><input type="checkbox"/><p>Ubuntu 9.10 x64</p></li>
    <li><input type="checkbox"/><p>Ubuntu 9.04 x86</p></li>
    <li><input type="checkbox"/><p>Ubuntu 9.10 x64</p></li>    

</ul>
</div><!-- End image-box -->
    
        <div id="info-box">
    
</div><!-- End info-box -->
        <div id="kore-box">
    
<ul >
    <li><input type="checkbox"/><p>kore01</p></li>
    <li><input type="checkbox"/><p>kore02</p></li>
    <li><input type="checkbox"/><p>kore03</p></li>
    <li><input type="checkbox"/><p>kore04</p></li>
    <li><input type="checkbox"/><p>kore05</p></li>
    <li><input type="checkbox"/><p>kore06</p></li>
</ul>
</div><!-- End kore-box -->
</div><!-- End demo -->

CSS

#content {height: 500px;}
#image-box { float: left; width: 365px; height: 100%; border: 1px solid black; overflow: auto;}
#info-box { float: left; width: auto; height: 100%; border: 1px solid black; overflow: auto;}
#kore-box { right: 0px; float: right; width: 365px; height: 100%; border: 1px solid black; overflow: auto;}

#image-box ul { list-style-type: none; margin: 4px; padding: 4px; }
#image-box  li { margin: 4px; padding: 0; float: left; width: 100px; height: 80px; border-top-left-radius: 4px; border-top-right-radius: 4px;border: 1px solid #126C91; cursor: pointer; background: url(http://opendesktop.org/CONTENT/content-m1/m98062-1.png) 10px 4px no-repeat;}
#image-box  li p{ color: black; margin: 44px 0px 0 0px; font-weight: bold; font-size: 12px; text-align: center;}
#image-box  li.selected { background: #75AFBD url(http://opendesktop.org/CONTENT/content-m1/m98062-1.png) 10px 4px no-repeat; box-shadow: 4px 4px 4px #6E9BA6;}
        
#kore-box ul { list-style-type: none; margin: 4px; padding: 4px; }
#kore-box  li { margin: 4px; padding: 0; float: left; width: 100px; height: 80px; border-top-left-radius: 4px; border-top-right-radius: 4px;border: 1px solid #126C91; cursor: pointer; background: url(https://lh4.googleusercontent.com/-eV_LNSe339o/T0VPbQcpkSI/AAAAAAAACSk/0FY0O2_Buhw/s80/server.png) 10px 4px no-repeat;}
#kore-box  li p{ color: black; margin: 44px 0px 0 0px; font-weight: bold; font-size: 12px; text-align: center;}
#kore-box  li.selected { background: #75AFBD url(https://lh4.googleusercontent.com/-eV_LNSe339o/T0VPbQcpkSI/AAAAAAAACSk/0FY0O2_Buhw/s80/server.png) 10px 4px no-repeat; box-shadow: 4px 4px 4px #6E9BA6;}

JavaScript

//http://www.learningjquery.com/2008/12/quick-tip-click-table-row-to-trigger-a-checkbox-click
$(function() {
    $('#kore-box li').click(function(){
        $('#image-box li').removeClass('selected');
        $(':checkbox', $('#image-box')).prop('checked', false);        
        $(this).toggleClass('selected');
        if (event.target.type !== 'checkbox') {
          $(':checkbox', this).attr('checked', function() {
          return !this.checked;
          });
        }            
    });
    
    $('#image-box li').click(function(){
        $('#kore-box li').removeClass('selected');
        $(':checkbox', $('#kore-box')).prop('checked', false);        
        $(this).toggleClass('selected');
        if (event.target.type !== 'checkbox') {
            $(':checkbox', this).attr('checked', function() {
                return !this.checked;
            });
        }        
    });
    
});