JSFiddle - React, Tailwind, and code Playground
HTML
<div id="pop-1">
UCNV
</div>
<div id="pop-2">
NUKEME
</div>
<div id="pop-3">
PHILIP STEARNS
</div>
<div id="pop-4">
SOLEIL ZUMBRUNN
</div>
<div id="pop-5">
MARGO WOLOWIEC
</div>
<div id="pop-6">
PLUMMER FERNANDEZ
</div>
<div id="pop-7">
KIM ASENDORF
</div>
<div id="pop-8">
MATHIEU ST-PIERRE
</div>
<div id="pop-9">
ANTONIO ROBERTS
</div>
<div id="pop-10">
YOSHI SODEOKA
</div>
<ul class="list-exhibition">
<li style="font-size: 1.5em; font-weight: 300; margin-bottom: 25px;">Exhibitors</li>
<li style="font-size: 1em; font-weight: 300; margin-bottom: 5px;">Click to find more information about an artist</li>
<li><div class="bar-live" style="margin-bottom: 15px;"></div>
</li>
<div id="click1" class="clickDesign"><li style="margin-top: 15px;">UCNV</li>
<div id="click2" class="clickDesign"><li>NUKEME</li>
<div id="click3" class="clickDesign"><li>PHILIP STEARNS</li>
<div id="click4" class="clickDesign"><li>SOLEIL ZUMBRUNN</li>
<div id="click5" class="clickDesign"><li>MARGO WOLOWIEC</li>
<div id="click6" class="clickDesign"><li>PLUMMER FERNANDEZ</li>
<div id="click7" class="clickDesign"><li>KIM ASENDORF</li>
<div id="click8" class="clickDesign"><li>MATHIEU ST-PIERRE</li>
<div id="click9" class="clickDesign"><li>ANTONIO ROBERTS</li>
<div id="click10" class="clickDesign"><li>YOSHI SODEOKA</li>
<li>MORE TBA...</li>
</ul>
CSS
#pop-1{
display:none;
position:absolute;
top:50px;
cursor:pointer;
}
#pop-2{
display:none;
position:absolute;
top:50px;
cursor:pointer;
}
#pop-3{
display:none;
position:absolute;
top:50px;
cursor:pointer;
}
h2 {
float:left;
display:block;
height:40px;
width:150px;
cursor:pointer;
}
.list-exhibition li {
text-align: right;
color: black;
font-family: Helvetica,'Lato',sans-serif;
font-size: 3em;
font-weight: 600;
}
ul {
list-style-type: none;
}
JavaScript
$("#click1").on('click', function() {
$("#pop-2, #pop-3,#pop-4,#pop-5,#pop-6,#pop-7,#pop-8,#pop-9,#pop-10").fadeIn();
$("#pop-1").fadeOut();
});
$("#click2").on('click', function() {
$("#pop-1, #pop-3,#pop-4,#pop-5,#pop-6,#pop-7,#pop-8,#pop-9,#pop-10").fadeIn();
$("#pop-2").fadeOut();
});
$("#click3").on('click', function() {
$("#pop-2, #pop-1,#pop-4,#pop-5,#pop-6,#pop-7,#pop-8,#pop-9,#pop-10").fadeIn();
$("#pop-3").fadeOut();
});