JSFiddle - React, Tailwind, and code Playground
HTML
<div id="our-people">
<ul>
<li><a href="#" class="job-desc"><img src="http://placehold.it/150x150" alt="staff1" width="191" height="191"/></a>
</li>
<li>Jon doe</li>
<li>09 548 5554</li>
<li>[email protected]</li>
</ul>
<p class="description">Joe Doe dolor sit amet, consectetur adipisicing elit. Officiis, tempora, libero, ipsa maxime facere ullam harum ad iusto laborum minima magni officia provident aut obcaecati quaerat fugiat labore qui aliquam.</p>
<ul>
<li><a href="#" class="job-desc"><img src="http://placehold.it/150x150" alt="staff1" width="191" height="191"/></a>
</li>
<li>Jenny Hill</li>
<li>09 548 5554</li>
<li>[email protected]</li>
</ul>
<p class="description">Jenny Hill dolor sit amet, consectetur adipisicing elit. Officiis, tempora, libero, ipsa maxime facere ullam harum ad iusto laborum minima magni officia provident aut obcaecati quaerat fugiat labore qui aliquam.</p>
<ul>
<li><a href="#" class="job-desc"><img src="http://placehold.it/150x150" alt="staff1" width="191" height="191"/></a>
</li>
<li>Peter Small</li>
<li>09 548 5554</li>
<li>[email protected]</li>
</ul>
<p class="description">Peter Small dolor sit amet, consectetur adipisicing elit. Officiis, tempora, libero, ipsa maxime facere ullam harum ad iusto laborum minima magni officia provident aut obcaecati quaerat fugiat labore qui aliquam.</p>
</div>
CSS
#our-people {
width:940px;
margin:0 auto;
}
ul {
float:left;
border:#ccc solid 1px;
}
.description {
display:none;
background: pink;
}
p {
display:block;
float:left;
}
JavaScript
$("li a.job-desc").click(function () {
var $desc = $(this).closest("ul").next("p.description");
var ul = $(this).closest("ul");
$desc.css("position", "fixed").css("top", (ul.height() + ul.offset().top) + "px");
$desc.fadeToggle("slow", "linear");
$('p.description:visible').not($desc).hide();
});