JSFiddle - React, Tailwind, and code Playground

by jFIT

HTML

<script src="http://www.scriptscale.com/blog/portfolio_html/Example%20WEb/js/jquery.js"></script>
<div class="empresa-main-area cf">
    <div class="product-row cf">
        <div class="product-main">
            <div class="product-img">
                <img src="http://www.scriptscale.com/blog/portfolio_html/Example%20WEb/images/product-img-4.png" alt="">
            </div>
            <!-- .product-img -->
            <div class="product-title">
                 <h2><a href="#" id="prod1">1</a></h2>

            </div>
            <!-- .product-title -->
        </div>
        <!-- .product-main -->
        <div class="product-main">
            <div class="product-img">
                <img src="http://www.scriptscale.com/blog/portfolio_html/Example%20WEb/images/product-img-4.png" alt="">
            </div>
            <!-- .product-img -->
            <div class="product-title">
                 <h2><a href="#" id="prod2">2</a></h2>

            </div>
            <!-- .product-title -->
        </div>
        <!-- .product-main -->
        <div class="product-main">
            <div class="product-img">
                <img src="http://www.scriptscale.com/blog/portfolio_html/Example%20WEb/images/product-img-4.png" alt="">
            </div>
            <!-- .product-img -->
            <div class="product-title">
                 <h2><a href="#" id="prod3">3</a></h2>

            </div>
            <!-- .product-title -->
        </div>
        <!-- .product-main -->
        <div class="product-main">
            <div class="product-img">
                <img src="http://www.scriptscale.com/blog/portfolio_html/Example%20WEb/images/product-img-4.png" alt="">
            </div>
            <!-- .product-img -->
            <div class="product-title">
                 <h2><a href="#" id="prod4">4</a></h2>

            </div>
            <!-- .product-title -->
        </div>
        <!-- .product-main -->
        <div class="product-detail det1 cf">
          ...

CSS

empresa-main-area {
    clear:both;
    padding:400px 0 0 0;
}
.product-row {
    clear:both;
    padding:10px 0 20px 0;
}
.product-row .product-main {
    width:225px;
    float:left;
    margin:0 60px 25px 0;
}
.product-row .product-main .product-img {
    height:80px;
    text-align:center;
    margin:0 auto;
}
.product-row .product-main .product-title h2 a {
    font-family:'Roboto Condensed';
    font-size:20px;
    color:#343434;
    clear:both;
    display:block;
    text-align:center;
    line-height:42px;
    position:relative;
    text-transform:uppercase;
    margin:10px 0 0 0;
}
.product-row .product-main .product-title h2 a:hover {
    background:url(../images/product-title-hover.png) bottom center no-repeat;
}
.product-row .product-detail {
    clear:both;
    height:150px;
    background:#e2ddcf;
}
.det1, .det2, .det3, .det4, .det5, .det6, .det7, .det8 {
    display:none;
}
.product-row .product-detail .product-detail-row {
    clear:both;
    padding:30px 0 0 30px;
}
.product-row .product-detail .product-detail-row .product-detail-main {
    width:540px;
    float:left;
}
.product-row .product-detail .product-detail-row .product-detail-main ul {
    margin:0;
    padding:0px;
    list-style:none;
}
.product-row .product-detail .product-detail-row .product-detail-main ul li {
    font-family:'Tahoma';
    font-size:14px;
    color:#686868;
    clear:both;
    padding:0 0 0 25px;
    background:url(../images/valores-text-bg.png) left 5px no-repeat;
    line-height:20px;
    margin:0 0 15px 0;
    height:25px;
}

JavaScript

$(function () {

    jQuery('a[id^="prod"]').on('click', function (e) {
        var id = $(this).attr('id').slice(-1);
        var previs = $('div.product-detail:visible');
        $('div.product-detail').hide();
        if (previs.is($('.det' + id))) {
            $('.det' + id).hide()
        }
        else
        {
            $('.det' + id).show();
        }
        
        //if (detailedDiv.is(':visible')) detailedDiv.hide();
        //else detailedDiv.show();
        e.preventDefault()
    });

});