jquery - Show hide div panels based on click of an ID -

i have 3 bio profiles have corresponding profile details. bio details hidden , on clicking profile image, other 2 disappear , bio details fade in. there close button close bio details block after 3 profile images fade in. have working, there lot of code so. i'd truncate down, possibly using data attributes or similar.

i plan on using layout on few pages, multiple profiles e.g. have page have 6 of these bio blocks begin with, more bio blocks being added in future resulting in more code being added 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 {  	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 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 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 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>

not sure question exactly, think answer you're looking work don't want do. answer is: take time figure out. looks know you're doing - if take time learn it, kudos you; smarter.

i suggest learning how use framework angular, or vue. these make applications more simple. no need jquery or complicated javascript. throw in bootstrap , bam - no more css. there plenty of tutorials out there on how use these.