jQuery addClass example

Change class name on click in jQuery

by Rylan Grady

HTML

<div class="user-products main">
			<div class="user-product">
				<div class ="collapsible-header">
					<span class="user-product-expand-toggle"><h4>&#9654; Product 1 - 2020-02-03 1:58pm</h4></span>
				</div>
				<div class="user-product-details hide">
					<div class="user-product-left">
					<p>Download All Files as Zip</p>
					<p>View Preview</p>
					<p>Details</p>
					<p>Details</p>
					<p>Details</p>
					</div>
					<div class="user-product-mid">
					<p>Details</p>
					<p>Details</p>
					<p>Details</p>
					<p>Details</p>
					<p>Details</p>
					</div>
					<div class="user-product-right">
					<div class="unpurchased-product"><button class="purchase-product">Purchase</button></div>
					</div>
				</div>
			</div>
			<div class="user-product">
				<div class ="collapsible-header">
					<span class="user-product-expand-toggle"><h4>&#9654; Product 2 - 2020-02-07 5:01pm</h4></span>
				</div>
				<div class="user-product-details hide">
					<div class="user-product-left">
					<p>Download All Files as Zip</p>
					<p>View Preview</p>
					<p>Details</p>
					<p>Details</p>
					<p>Details</p>
					</div>
					<div class="user-product-mid">
					<p>Details</p>
					<p>Details</p>
					<p>Details</p>
					<p>Details</p>
					<p>Details</p>
					</div>
					<div class="user-product-right">
					<div class="unpurchased-product"><button class="purchase-product">Purchase</button></div>
					</div>
				</div>
			</div>
		</div>

CSS

.hide.hide {
  display: none;
}

.user-products.main {
	overflow-y:auto;
}
.user-product-details {
	margin-left:50px;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
}

.collapsible-header{
	margin-left:50px;
	text-align: left;
	cursor: pointer;
	
}

JavaScript

$(".user-product-expand-toggle").click(function(){
		parentDiv = $(this).closest(".collapsible-header");
		$(parentDiv.siblings(".user-product-details")[0]).slideToggle('slow', function() {
			if ($(this).is(':visible'))
				$(this).css('display','grid');
		});
		
	});