JSFiddle - React, Tailwind, and code Playground

by pandaktuai

HTML

<div>
<dl>
 <dt>Thumbnail A</dt>
  <dd>Name A</dd>
  <dd>Price A</dd>
</dl>

<ul class="details">
 <li>Image A</li>
</ul>
</div>

<div>
<dl>
 <dt>Thumbnail B</dt>
  <dd>Name B</dd>
  <dd>Price B</dd>
</dl>

<ul class="details">
 <li>Image B</li>
</ul>
</div>

CSS

div {
	display: inline;
}

dl {
	display: inline-block;
	width: 250px;
	background-color: green;
	position: relative;
}
dt {
	background-color: red;
}
dd {
	background-color: blue;
	margin: 0px;
}
.details {
	width: 100%;
	float: left;
	background-color: yellow;
	display: none;
	margin: 0px;
	padding: 0px;
	list-style-type: none;
}

JavaScript

$(document).ready(function(){


$('div').click(function(){

 var then = $(".details", this)
 $(then).toggle();
 $(".details:visible").not(then).hide();
});

});