JSFiddle - React, Tailwind, and code Playground

by anay1231

HTML

<div class="description-read">	
	<button class="readMoreBtn">Read more</button>
	<div class="panel">
		<p>If you have a passion for modern, contemporary design around your home then you will want to find modern lighting that not only compliments but enhances that design ethos. We have beautiful selections of contemporary lighting for all rooms of your house as well as a stunning range of outdoor lighting.</p>
	</div>
	<button class="showLessBtn">Read less</button>
</div>

CSS

.description-read{
	padding: 0;
    color: #000000;
    text-align: center;
    margin: 0px 0 20px;
    position: relative;
}
.description-read:before{
	content: "";
	border-bottom: 1px solid #c7c7c7;
	position: absolute;
    bottom: 17px;
    width: 100%;
    left: 0;
    z-index: 0;
}
.description-read button.readMoreBtn, .description-read button.showLessBtn {
	background-color: #bc2632;
    color: #fff;
    cursor: pointer;
    font-weight: 700;
    padding: 8px 20px;
    border: none;
    text-align: center;
    outline: none;
    font-size: 15px;
    border-radius: 0px;
    transition: 0.4s;
    z-index: 1;
    position: relative;
}
.description-read button.readMoreBtn.active, .category-description-read button.readMoreBtn:hover,
.description-read button.showLessBtn.active, .description-read button.showLessBtn:hover  {
	background-color: #000;
}
.description-read div.panel {
	padding: 0px 0px 15px;
	transition: max-height 0.2s ease-out;
	display: none;
	text-align: left;
}
.description-read button.showLessBtn{display: none;}

JavaScript

jQuery('.readMoreBtn').click(function(){
	jQuery(this).next().show();
	jQuery(this).hide();
	jQuery('.showLessBtn').show();
});
jQuery('.showLessBtn').click(function(){
	jQuery(this).prev().hide();
	jQuery(this).hide();
	jQuery('.readMoreBtn').show();
});