Hello Dear Readers, Today In this Post, You will learn Bootstrap 5 Tutorial In Hindi #48 | Collapse Tutorial. Earlier I have shared the Bootstrap 5 Tutorial In Hindi #47 | Accordion Tutorial. and now it’s time to Bootstrap 5 Collapse Tutorial.
In this tutorial, You will learn full Bootstrap 5. If you want to go deep into the tutorial so you can watch the full video which is below Hope it will help you all thank you for visiting.
In this tutorial, you will learn Bootstrap Tutorial In Hindi, Bootstrap 5 Collapse Tutorial. Here You can learn what is a bootstrap framework, what are the advantages of the bootstrap tutorial in Hindi. Make sure to Subscribe, Share the video, and Like it, for more tutorials in Hindi like this one!
How it works
height from its current value to
0. Given how CSS handles animations, you cannot use
padding on a
.collapse element. Instead, use the class as an independent wrapping element.
Click the buttons below to show and hide another element via class changes:
.collapsingis applied during transitions
Generally, we recommend using a button with the
data-bs-target attribute. While not recommended from a semantic point of view, you can also use a link with the
href attribute (and a
role="button"). In both cases, the
data-bs-toggle="collapse" is required.
<a> can show and hide multiple elements by referencing them with a selector in its
data-bs-target attribute. Multiple
<a> can show and hide an element if they each reference it with their
Be sure to add
aria-expanded to the control element. This attribute explicitly conveys the current state of the collapsible element tied to the control to screen readers and similar assistive technologies. If the collapsible element is closed by default, the attribute on the control element should have a value of
aria-expanded="false". If you’ve set the collapsible element to be open by default using the
show class, set
aria-expanded="true" on the control instead.
<div>), the attribute
role="button" should be added to the element.
If your control element is targeting a single collapsible element – i.e. the
data-bs-target attribute is pointing to an
id selector – you should add the
aria-controls attribute to the control element, containing the
id of the collapsible element. Modern screen readers and similar assistive technologies make use of this attribute to provide users with additional shortcuts to navigate directly to the collapsible element itself.