JSFiddle - React, Tailwind, and code Playground

by Md Akib Hossain

HTML

<!-- Team Accordion Section Starts Here -->
			<div class="team-accordion-section">
				<div class="team-item-area notJump">
					<div class="container">
						<div class="team-item-area-wrapper">
							<img src="img/team-accordion-member.png" alt="" />
								
							<div class="team-item-right-content">
								<h3 class="sub-heading">Paul Weston MRICS, Director</h3>
								
								<p class="team-item-right-para">s a founding partner of Levanter Paul has help lead Levanter into a multitude of 'outside the box' projects including the purchase of property asset backed debt in the UK and Europe, owning and managing shopping centres and site assembly consultancy for high level developments including Battersea Power Station. Paul’s principal focus is now site assembly and acquisition through to design, planning procurement and ultimate development of high quality sites within Surrey and  </p>
							</div>
						</div>
					</div>
				</div>
				<div class="team-item-area notJump">
					<div class="container">
						<div class="team-item-area-wrapper">
							<img src="img/team-accordion-member.png" alt="" />
								
							<div class="team-item-right-content">
								<h3 class="sub-heading">Paul Weston MRICS, Director</h3>
								
								<p class="team-item-right-para">s a founding partner of Levanter Paul has help lead Levanter into a multitude of 'outside the box' projects including the purchase of property asset backed debt in the UK and Europe, owning and managing shopping centres and site assembly consultancy for high level developments including Battersea Power Station. Paul’s principal focus is now site assembly and acquisition through to design, planning procurement and ultimate development of high quality sites within Surrey and  </p>
							</div>
						</div>
					</div>
				</div>
				<div class="team-item-area notJump">
					<div class="container">
						<div class="team-item-area-wrapper">
							<img src="img/team-accordion-member.png" alt=""...

CSS

.team-accordion-section {
	margin-bottom: 150px;
}

.team-item-area {
	background: #eee;
	margin-bottom: 45px;
}

.team-item-area:hover {
	cursor: pointer;
}

.team-item-right-content {
	width: 88%;
	float: left;
	padding-left: 25px;
}

.team-item-area-wrapper {
	position: relative;
	display: inline-block;
	width: 100%;
}

.team-item-area img {
	dispaly:none;
}

.team-item-right-content .sub-heading {
	margin-top: 15px;
	margin-bottom: 5px;
}

.team-item-right-content p {
	color: #333;
}

.team-item-right-content a {
	color: #fbad18;
	text-decoration: underline;
}

.team-item-right-para {
	display: none;
}

JavaScript

$(".team-item-area").on('click', function(){
			$(this).siblings().find('.team-item-right-para').slideUp();
			$(this).find(".team-item-right-para").slideToggle(function(){
				var check = $(this).is(":visible");

				if(check == true)
				{
					$(this).parents('.team-item-area').siblings().find('img').hide();
					$(this).parents('.team-item-area').find("img").fadeIn();
				} else {
					$(this).parents('.team-item-area').find("img").show();
					$(this).parents('.team-item-area').siblings().find('img').fadeIn();
				}
			});
			
			
		})