Collapse plugin and carousel plugin
Wrap
Change the visibility of content throughout your project with a few classes with our JavaScript plugins.
For example
Click the buttons below to display and hide something else with class changes:
.close hides content
. wrap is used during the transition
.close.show shows content
You can use the link with the href attribute, or the button with the target data. In both cases, data-toggle = "collapse" is required.
Example of Collapse plugin
<![CDATA[
<p>
<a class="btn btn-primary" data-toggle="collapse" href="#collapseExample"
role="button" aria-expanded="false" aria-controls="collapseExample">
Connect with href
</a>
<button class = "btn btn-primary" type = "button" data-toggle = "collapse"
data-target = "# collapseExample" aria-expanded = "false" aria-controls = "collapseExample">
Data target button
</button>
</p>
<div class = "collapse" id = "collapseExample">
<div class = "card-body body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accamus terry richardson ad squid.
Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
</div>
</div>
]]>
OUTPUT :
How to make a carousel
The following example shows how to create a basic carousel:
For example
<![CDATA[
<div class="container">
<div class="row py-5">
<div class="col">
<div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-indicators">
<button type="button" data-bs-target="#carouselExampleCaptions"
data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#carouselExampleCaptions"
data-bs-slide-to="1" aria-label="Slide 2"></button>
<button type="button" data-bs-target="#carouselExampleCaptions"
data-bs-slide-to="2" aria-label="Slide 3"></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="..." class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>First slide label</h5>
<p>Some representative placeholder content for the first slide.</p>
</div>
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>Second slide label</h5>
<p>Some representative placeholder content for the second slide.</p>
</div>
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>Third slide label</h5>
<p>Some representative placeholder content for the third slide.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
]]>
OUTPUT :
