JSFiddle - React, Tailwind, and code Playground
HTML
<div class="slideshow">
<div class="slideshow-nav">
<ul>
<li><a class="fade-in" data-patient="patient1" href="#">Patient 1</a></li>
<li><a class="fade-out" data-patient="patient2" href="#">Patient 2</a></li>
<li><a class="fade-out" data-patient="patient3" href="#">Patient 3</a></li> </ul>
</div>
<div id="patient-bios">
<div class="show" data-patient="patient1">Patient 1 Bio</div>
<div class="hide" data-patient="patient2">Patient 2 Bio</div>
<div class="hide" data-patient="patient3">Patient 3 Bio</div>
</div><!-- .float-right -->
</div><!-- .slideshow -->
CSS
.show {
display: block;
}
.hide {
display: none;
}
.fade-in {
opacity: 1;
}
.fade-out {
opacity: 0.5;
}
JavaScript
// Start anonymous function
(function() {
// jQuery shorthand document ready
$(function() {
// Slideshow
if($(".slideshow").length > 0) {
$(".slideshow .slideshow-nav a").on("click", function(e) {
e.preventDefault();
if($(this).hasClass("fade-out")) {
// Make clicked on slideshow nav opacity 1 and
// navs NOT clicked on opacity 0.3
$(".slideshow").find(".slideshow-nav").find("a").removeClass("fade-in").addClass("fade-out");
$(this).removeClass("fade-out").addClass("fade-in");
// Show patient text & images for clicked on nav and
// hide other patient text & images
$(".slideshow").find(".show").removeClass("show").addClass("hide");
var clickedNav = $(this).attr("data-patient");
$('.slideshow').find('div[data-patient=' + clickedNav + ']').removeClass('hide').addClass('show');
$('.slideshow').find('img[data-patient=' + clickedNav + ']').removeClass('hide').addClass('show');
}
});
}
});
})();