JSFiddle - React, Tailwind, and code Playground

by Trevor Dowdle

HTML

<div id="container-results">
  <div id="bottom-results-wrap">
  <div class="otherbrands-wrap">
  <div class="logo"><img src="img/product-logo.gif" width="149" height="40" alt=" " /></div>
  <div class="price-text">INFO TEXT</div>
  <div class="model-price-sm"></div>
  <div class="btn_view"><a href="#" onclick="toggle_visibility('all-product-one',this);">VIEW ALL</a></div>
  </div>
  <div class="otherbrands-wrap">
    <div class="logo"><img src="img/product-logo.gif" width="149" height="40" alt=" " /></div>
    <div class="price-text">INFO TEXT</div>
    <div class="model-price-sm"></div>
    <div class="btn_view"><a href="#" onclick="toggle_visibility('all-product-two',this);">VIEW ALL</a></div>
  </div>
  <div class="otherbrands-wrap">
    <div class="logo"><img src="img/product-logo.gif" width="149" height="40" alt=" " /></div>
    <div class="price-text">INFO TEXT</div>
    <div class="model-price-sm"></div>
    <div class="btn_view"><a href="#" onclick="toggle_visibility('all-product-three',this);">VIEW ALL</a></div>
  </div>
  <div class="otherbrands-wrap">
    <div class="logo"><img src="img/product-logo.gif" width="149" height="40" alt=" " /></div>
    <div class="price-text">INFO TEXT</div>
    <div class="model-price-sm"></div>
    <div class="btn_view"><a href="#" onclick="toggle_visibility('all-product-four',this);">VIEW ALL</a></div>
  </div>
  <div class="otherbrands-wrap">
    <div class="logo"><img src="img/product-logo.gif" width="149" height="40" alt=" " /></div>
    <div class="price-text">INFO TEXT</div>
    <div class="model-price-sm"></div>
    <div class="btn_view"><a href="#" onclick="toggle_visibility('all-product-five',this);">VIEW ALL</a></div>
  </div>
  <div class="otherbrands-wrap" id="box6">
    <div class="logo"><img src="img/product-logo.gif" width="149" height="40" alt=" " /></div>
    <div class="price-text">INFO TEXT</div>
    <div class="model-price-sm"></div>
    <div class="btn_view"><a href="#"...

CSS

#container-results img {
	border:none;
}
#box6 {margin-right:0;}
.spec {
	float: left;
	height: auto;
	width: 129px;
	padding:0 10px;
	margin: 10px 0;
}
.model-name {
	float:left;
	width: 129px;
	font:bold 0.75em/12px arial, sans-serif;
	color:#000000;
	height:auto;
	margin-bottom:4px;
	line-height:11px;
	white-space:nowrap;
	overflow:hidden;
	text-overflow: ellipsis;
}
.model-size {
	float:left;
	width:129px;
	height: auto;
	font:normal 0.625em/10px arial, sans-serif;
	color:#808080;
}
#bottom-results-wrap {
	float:left;
	width:966px;
	height:auto;
	margin:0;
	padding: 0 0 20px;
}
.otherbrands-wrap {
	float: left;
	width: 149px;
	height:127px;
	margin: 0 12px 12px 0;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-right-color: #acacac;
	border-bottom-color: #acacac;
	border-left-color: #acacac;
}
.logo {
	float:left;
	width:149px;
	height:40px;
	margin:0;
	padding:0;
}
.price-text {
	float:left;
	width:149px;
	height:auto;
	margin:10px 0 2px;
	text-align:center;
	font:bold 0.6875em/11px arial, sans-serif;
	color:#000000;
}
.btn_view {
	clear:left;
	width:80px;
	height:23px;
	display:block;
	background-color:#666;
	margin:0 auto 10px;
}

	
/*--------------------- Show/Hide ---------------------*/

#all-product-one {
	float:left;
	width:966px;
	height:auto;
	margin:0 0 12px;
	padding:0;
}
#all-product-two {
	float:left;
	width:966px;
	height:auto;
	margin:0 0 12px;
	padding:0;
}
.reveal-wrap {
	float: left;
	width: 149px;
	padding:0;
	height:350px;
	margin: 12px 12px 0 0;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-right-color: #acacac;
	border-bottom-color: #acacac;
	border-left-color: #acacac;
}
.reveal-tyre-image {
	float:left;
	width:129px;
	height:66px;
	padding:0;
	margin:10px 10px 0;
	text-align:center;
}

JavaScript

function toggle_visibility(id,el) {
	event.preventDefault();
    $('.btn_view a').html('VIEW ALL');
    $('.price-text').show();
    var e = document.getElementById(id);
    if (e.style.display == 'block') 
    {
        e.style.display = 'none';
        $(el).html('VIEW ALL');
    }
    else 
    {
        e.style.display = 'block';
        $(el).html('HIDE ALL');
        $(el).parent().parent().find('.price-text').hide();
        //$(el).parent().prev('.price-text').hide();
    }
    
    hideAllBut(id);
}

function hideAllBut(id) {
    var lists = document.querySelectorAll('.reveal');
    for (var i = lists.length; i--; ) {
        if (lists[i].id != id) {
            lists[i].style.display = 'none';
        }
    }
}