W3CoreUI

Collapse.

Toggle the visibility of content across your project with a few classes and our JavaScript plugins. Click here

Basic Example

Click the buttons below to show and hide another element via class changes:

Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger.


<p class="d-inline-flex gap-1">
  <a class="btn btn-primary" data-bs-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
	Link with href
  </a>
  <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
	Button with data-bs-target
  </button>
</p>
<div class="collapse" id="collapseExample">
  <div class="card card-body">
	Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger.
  </div>
</div>

Horizontal

The collapse plugin supports horizontal collapsing. Add the .collapse-horizontal modifier class to transition the width instead of height and set a width on the immediate child element. Feel free to write your own custom Sass, use inline styles, or use our width utilities.

This is some placeholder content for a horizontal collapse. It's hidden by default and shown when triggered.


<p>
  <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseWidthExample" aria-expanded="false" aria-controls="collapseWidthExample">
	Toggle width collapse
  </button>
</p>
<div style="min-height: 120px;">
  <div class="collapse collapse-horizontal" id="collapseWidthExample">
	<div class="card card-body" style="width: 300px;">
	  This is some placeholder content for a horizontal collapse. It's hidden by default and shown when triggered.
	</div>
  </div>
</div>

Multiple toggles and targets

A <button> or <a> element can show and hide multiple elements by referencing them with a selector in its data-bs-target or href attribute. Conversely, multiple <button> or <a> elements can show and hide the same element if they each reference it with their data-bs-target or href attribute.

Toggle first element

Some placeholder content for the first collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger.

Some placeholder content for the second collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger.


<p class="d-inline-flex gap-1">
  <a class="btn btn-primary" data-bs-toggle="collapse" href="#multiCollapseExample1" role="button" aria-expanded="false" aria-controls="multiCollapseExample1">Toggle first element</a>
  <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#multiCollapseExample2" aria-expanded="false" aria-controls="multiCollapseExample2">Toggle second element</button>
  <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target=".multi-collapse" aria-expanded="false" aria-controls="multiCollapseExample1 multiCollapseExample2">Toggle both elements</button>
</p>
<div class="row">
  <div class="col">
	<div class="collapse multi-collapse" id="multiCollapseExample1">
	  <div class="card card-body">
		Some placeholder content for the first collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger.
	  </div>
	</div>
  </div>
  <div class="col">
	<div class="collapse multi-collapse" id="multiCollapseExample2">
	  <div class="card card-body">
		Some placeholder content for the second collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger.
	  </div>
	</div>
  </div>
</div>

Card Collapse

Add Blog Category

Name

Slug

Example textarea


<div class="card card-collapse">
	<div class="card-header">
		<h4 class="card-title text-primary">Add Blog Category</h4>
		<a class="collapse-indicator" data-bs-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
			<i class="fa fa-angle-down"></i>
		</a>
	</div>
	<div class="collapsed collapse show" id="collapseExample">
		<div class="card-body">
			<div class="mb-3">
				<label class="form-label">Name</label>
				<input type="text" class="form-control" placeholder="Name">
			</div>
			<div class="mb-3">
				<label class="form-label">Slug</label>
				<input type="text" class="form-control" placeholder="Slug">
			</div>
			<div class="mb-3">
				<label for="exampleFormControlTextarea1" class="form-label">Example textarea</label>
				<textarea class="form-control" id="exampleFormControlTextarea1" rows="8"></textarea>
			</div>
			<div>
				<button type="button" class="btn btn-primary">Save</button>
			</div>
		</div>
	</div>
</div>