Show hide div panels based on click of an ID

Question

I have 3 Bio Profiles that have corresponding profile details. Initially the bio details are hidden and on clicking a profile image, the other 2 disappear and the bio details then fade in. There is also a Close button to close the bio details block after which the 3 profile images fade back in. I have this working, but there is A LOT of code to do so. I'd like to truncate this down, possibly using data attributes or similar.

I plan on using this layout on a few pages, with multiple profiles e.g. I have another page that will have 6 of these bio blocks to begin with, with more bio blocks being added in the future resulting in much more code being added for each bio block.

// Board of Directors Bios
    $("#panel_a1").click(function (event) {
        event.preventDefault();
        $("#panela1, #panela2, #panela3").hide();
        setTimeout(function () { $('#bio_a1, #panela1').fadeIn(400) }, 300);
        $("#panela1").addClass("open");
    });

    $("#panel_a2").click(function (event) {    
        event.preventDefault();
        $("#panela1, #panela2, #panela3").hide();
        setTimeout(function () { $('#bio_a2, #panela2').fadeIn(400) }, 300);
        $("#panela2").addClass("open");
    });

    $("#panel_a3").click(function (event) {    
        event.preventDefault();
        $("#panela1, #panela2, #panela3").hide();
        setTimeout(function () { $('#bio_a3, #panela3').fadeIn(400) }, 300);
        $("#panela3").addClass("open");
    });

    $(".close_bio.tm_level_1").click(function (event) {
        event.preventDefault();
        $("#bio_a1, #panela1, #bio_a2, #panela2, #bio_a3, #panela3").hide();
        setTimeout(function () { $('#panela1, #panela2, #panela3').fadeIn(400) }, 300);
        $('#panela1, #panela2, #panela3').removeClass("open");
    });

div.bio_block {
	width: auto;
	height: auto;
	min-height: 373px;
	margin-top: 20px;
}
div.view_bio {
    position: absolute;
    top: 0;
    left: 0;
    width: calc(100% - 10px);
    height: calc(100% - 10px);
    margin: 5px;
    z-index: 100;
    background: rgba(0,0,0,0.5);
    opacity: 0;
    -webkit-transition: opacity 0.2s;
    -moz-transition: opacity 0.2s;
    transition: opacity 0.2s;
}
div.bio div.bio_image:hover div.view_bio {
	opacity: 1;
}
div.bio.open div.bio_image:hover div.view_bio {
	opacity: 0;
}
div.view_bio p {	
	font-family: "Montserrat Regular", Arial, Helvetica, sans-serif;
	font-size: 1.5em;
	line-height: normal;
	color: white;
	text-shadow: 2px 2px rgba(0,0,0,0.6);
}
div.bio {
	position: relative;
	float: left;
	width: calc(33.3333333333% - 28px);
	height: auto;
	margin: 0 42px 42px 0;
	z-index: 50;
}
div.bio:nth-child(3n+3) {
	margin: 0 0 42px 0;
}
div.bio.open a {
	cursor: default;
}
div.bio div.bio_image.board,
div.bio div.bio_image.management {
	position: relative;
	width: 100%;
	height: auto;	
}
div.bio div.bio_image img {
    width: 100%;
    border: 5px solid white;
    overflow: hidden;
    box-shadow: 0 0 5px 5px rgba(0,0,0,0.1);
}
div.bio div.bio_preview {
	width: auto;
	height: auto;
	text-align: center;
}
div.bio div.bio_preview h2 {
    margin-bottom: 0;
}
div .bio div.bio_preview p.bio_name, div.bio div.bio_preview h2 {
    font-family: "Montserrat Regular", Arial, Helvetica, sans-serif;
    font-size: 1.3em;
    padding-top: 15px;
    line-height: 1.3;
}
.open p.bio_title {
    display: none;
}
div.bio_details {
	float: right;
	width: calc(66.6666666666% - 20px);
}
div.bio_details h3,
div.bio_details p {
	text-align: left;
}
div.bio_details h3 {
	padding-bottom: 5px;
	border-bottom: 1px solid #5a9f44;
}
div.bio_details a.close_bio {
	font-size: 0.85em;
	color: black;
	line-height: 30px;
	display: block;
	float: right;
	text-decoration: none;
	-webkit-transition: color 0.2s;
	   -moz-transition: color 0.2s;
			transition: color 0.2s;
}
div.bio_details a.close_bio:hover,
div.bio_details a.close_bio:focus {
	color: #5a9f44;
}
div.bio_details a.close_bio:before {
	font-family: "Material-Design-Iconic-Font";
    font-size: 30px;
    display: block;
	float: left;
    margin-right: 5px;
    color: #5a9f44;
	content: '\f134';
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<h2 class="team_level_1">Board of Directors</h2>
<div class="bio_block">
	<div class="bio" id="panela1">
		<a href="#" id="panel_a1">								
			<div class="bio_image board">
				<div class="view_bio">
					<p>View Bio 1</p>
				</div>
			</div>
		</a>
		<div class="bio_preview">
			<p class="bio_name">Person 1</p>
			<p class="bio_title">Job Title</p>
		</div>							
	</div>
	<div class="bio" id="panela2">
		<a href="#" id="panel_a2">								
			<div class="bio_image board">
				<div class="view_bio">
					<p>View Bio 2</p>
				</div>
			</div>
		</a>
		<div class="bio_preview">
			<p class="bio_name">Person 2</p>
			<p class="bio_title">Job Title</p>
		</div>
	</div>
	<div class="bio" id="panela3">
		<a href="#" id="panel_a3">								
			<div class="bio_image board">
				<div class="view_bio">
					<p>View Bio 3</p>
				</div>
			</div>
		</a>
		<div class="bio_preview">
			<p class="bio_name">Person 3</p>
			<p class="bio_title">Job Title</p>
		</div>
	</div>
	<div class="bio_details" id="bio_a1" style="display: none;">
		<h3>Job Title 1</h3>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
		<a href="#" class="close_bio tm_level_1">Close</a>
		<br class="clearfloat" />
	</div>
	<div class="bio_details" id="bio_a2" style="display: none;">
		<h3>Job Title 2</h3>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
		<a href="#" class="close_bio tm_level_1">Close</a>
		<br class="clearfloat" />
	</div>
	<div class="bio_details" id="bio_a3" style="display: none;">
		<h3>Job Title 3</h3>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
		<a href="#" class="close_bio tm_level_1">Close</a>
		<br class="clearfloat" />
	</div>
	<br class="clearfloat" />
</div>

Answer 1

just replace JS-code with the follow:

    var bios = $(".bio");

$(".bio a").on("click", function(){
    bios.hide();
    var current_id = $(this).attr('id');
    var bio_id = current_id.replace(/panel_/g, 'bio_');
    setTimeout(function () { $('#' + bio_id +', #' + current_id.replace(/_/g,'')).fadeIn(400) }, 300);
    $(this).parent().addClass("open");

});

$(".close_bio.tm_level_1").on("click", function (event) {
    $(".bio_details, .bio").hide();
    setTimeout(function () { $('.bio').fadeIn(400) }, 300);
    $('.bio').removeClass("open");
});

$(".bio a").on("click", function () {
    console.log('some event');
});

Other my recomendations:

1. Replace jQuery to new version https://code.jquery.com/jquery-3.2.1.min.js
2. Use $(".some").on("click", function (event) { }); instead $(".some").click
3. Try using classes instead ids for make operation. For example instead - as for me, i operate with multiple element more offen, than with one

Answer 2

Not sure what the question is exactly, but I think the answer you're looking for is simply the work you don't want to do. My answer is: take the time to figure it out. It looks like you know what you're doing - if you take the time to learn it, kudos to you; you are that much smarter.

I suggest learning how to use a framework like angular, or vue. These would make your applications much more simple. No need for jquery or complicated javascript. Throw in some bootstrap and bam - no more css. There are plenty of tutorials out there on how to use these.