JSFiddle - React, Tailwind, and code Playground

HTML

<div class="bigLeft">
    <div id="defaultProfile">Default Profile</div>
    <div id="ben_profile">Ben's Profile</div>
    <div id="dan_profile">Dans Profile</div>
</div>

<ol class='band'>
<li id="dan">Dan</li>
<li id="ben">Ben</li>
</ol>

CSS

ol.band li {
    color: blue;
    padding: 10px;
    cursor: pointer;
}

JavaScript

$('.bigLeft div:gt(0)').hide();

$('ol.band li').click(function() {
    var $th = $(this);

        // Hide the current profiles
    $(".bigLeft").children().hide();

    if( $th.hasClass('selected') ) {
        $th.siblings().fadeTo("slow", 1);
        $th.removeClass('selected');
        $('#defaultProfile').show(); // <-- change the ID to the default
    } else {
        $th.addClass('selected');

          // Grab the ID of the one that was clicked
        var id = $th.attr('id');

          // Fade in the current, and fade the siblings
        $th.fadeTo("slow", 1)
               .siblings().removeClass('selected').fadeTo("slow", 0.3);

          // Show the clicked profile by concatenating the ID clicked with '_profile'
        $("#" + id + "_profile").show();
    }
});