Collapse

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.

	
	
	<div> 
		<div class="flex flex-wrap items-center gap-2">
			<a href="javascript:void(0)" class="btn bg-primary text-white rounded-lg" data-collapse-btn>
				Link with click
			</a> 
			<button type="button" class="btn bg-primary text-white rounded-lg" data-collapse-btn>
				Button with click
			</button>
		</div> 
		<div class="overflow-hidden transition-all duration-300 max-h-0" data-collapse-box>
			<div class="p-4 mt-4 bg-light rounded-lg border border-border-color">
				Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.
				Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
			</div>
		</div>
	</div>

Collapse Horizontal

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.

	
	
	<div>
		<button type="button" class="btn bg-primary text-white rounded-lg" data-collapse-btn>
			Toggle with collapse
		</button> 
		<div class="overflow-hidden transition-all duration-300 w-0" data-collapse-box>
			<div class="p-4 mt-4 bg-light rounded-lg border border-border-color w-[350px]">
				Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.
				Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
			</div>
		</div>
	</div>

Multiple Targets

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.

	
	
	<div> 
		<div class="flex flex-wrap items-center gap-2">
			<button class="btn bg-primary text-white rounded-lg" data-collapse-target="#collapseOne">
				Toggle first element
			</button> 
			<button class="btn bg-primary text-white rounded-lg" data-collapse-target="#collapseTwo">
				Toggle second element
			</button> 
			<button class="btn bg-primary text-white rounded-lg" data-collapse-target="#collapseOne,#collapseTwo">
				Toggle both elements
			</button>
		</div> 
		<div class="lg:flex gap-3 block"> 
			<div id="collapseOne" class="overflow-hidden transition-all duration-300 max-h-0">
				<div class="p-4 mt-4 mb-1 bg-light rounded-lg border border-border-color">
					Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.
					Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
				</div>
			</div> 
			<div id="collapseTwo" class="overflow-hidden transition-all duration-300 max-h-0">
				<div class="p-4 mt-4 mb-1 bg-light rounded-lg border border-border-color">
					Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.
					Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
				</div>
			</div>
		</div> 
	</div>