JSFiddle - React, Tailwind, and code Playground

by Swader

HTML

<a href="javascript:void(0)" id="john_doe" class="personlink selected">John Doe</a>
<a href="javascript:void(0)" id="jane_doe" class="personlink">Jane Doe</a>


<div id="client_info_box">
    <div class="user_content">
        <div class="content_box" id="john_doe_info">This guy is named John Doe!</div>
        <div class="content_box" id="jane_doe_info" style="display: none;">This chick is awesome!</div>
    </div>
</div>

CSS

a {display: block}

a.selected {color: red}

#client_info_box {
    margin-top: 10px;
    border: 1px solid silver;
    width: 400px;
    padding: 5px;
    position: relative;
    overflow: auto;
    height: 300px;
}

.content_box {
    position: absolute;
    top:0;
    left:0;
}

JavaScript

$(document).ready(function(){
    $("a.personlink").bind("click", function(e){
        $("a.personlink").removeClass("selected");
        $(event.target).addClass("selected");
    
        $.each($(".content_box"), function(i, obj){
            if ($(obj).attr("id") != $(e.target).attr("id")+"_info") {
                $(obj).fadeOut();
            } else {
                $(obj).fadeIn();
            }
        });
    });
});