JSFiddle - React, Tailwind, and code Playground

by webworm

HTML

<div style="border: 1px solid black;width: 200px;float: left;">
    <ul style="list-style: none;">
        <li><a href="#" class="review-link" name="review-1">Click to see Review 1</a></li>
        <li><a href="#" class="review-link" name="review-2">Click to see Review 2</a></li>
        <li><a href="#" class="review-link" name="review-3">Click to see Review 3</a></li>
        <li><a href="#" class="review-link" name="review-4">Click to see Review 4</a></li>
        <li><a href="#" class="review-link" name="review-5">Click to see Review 5</a></li>
        <li><a href="#" class="review-link" name="review-6">Click to see Review 6</a></li>
        <li><a href="#" class="review-link" name="review-7">Click to see Review 7</a></li>
        <li><a href="#" class="review-link" name="review-8">Click to see Review 8</a></li>
    </ul>
</div>

<div id="review-content-container" style="border: 1px solid black;width: 400px;float: left;">

    <div id="review-1" style="display:none">
    Review 1 content
    </div>
    
    <div id="review-2" style="display:none">
    Review 2 content
    </div>
    
    <div id="review-3" style="display:none">
    Review 3 content
    </div>
    
    <div id="review-4" style="display:none">
    Review 4 content
    </div>
    
    <div id="review-5" style="display:none">
    Review 5 content
    </div>
    
    <div id="review-6" style="display:none">
    Review 6 content
    </div>
    
    <div id="review-7" style="display:none">
    Review 7 content
    </div>
    
    <div id="review-8" style="display:none">
    Review 8 content
    </div>

</div><!-- /#review-content -->

JavaScript

$(document).ready(function(){
        
    $(".review-link").click(function () {
        var divname = this.name;
      $("#"+divname).show("slow").siblings().hide("slow");
    });
     
});