This chapter will discuss about Bootstrap collpase. Collasping is toggling the content visibility. This is achieved using bootstrap’s javaScript plugins and some classes.
- The JavaScript plugin for collapse is used to display and hide information. Buttons or anchors act as triggers when mapped to specific elements to toggle.
- When an element is collapsed, the height will animate from its current value to zero. Due to how CSS handles animations, padding cannot be applied to a .collapse element.
Basic example
A basic collapse works as in the following example. Buttons when clicked show and hide another element via class changes:
- Class .collapse hides content.
- Class .collapsing helps transitions.
- Classes .collapse.show displays content.
Using a button with the data-bs-target attribute is a good idea. You can also use an <a> link with a role=”button” (although this is not advised from a semantic perspective). data-bs-toggle=”collapse” is necessary in both situations.https://www.tutorialspoint.com/bootstrap/examples/collapse_basic_example.php
Example
You can edit and try running this code using Edit & Run option.
<!DOCTYPE html><html lang="en"><head><title>Bootstrap plugin - Collapse</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><p><a class="btn btn-primary" data-bs-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">Collapse using link </a><button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample"> Collapse using button </button></p><div class="collapse" id="collapseExample"><div class="card card-body"> The collapse JavaScript plugin used to display and hide content. </div></div></body></html></pre>
Horizontal
Horizontal collapsing is supported by collapse plugin. Set a width on the immediate child element and add the .collapse-horizontal modifier class to transition the width rather than the height. You can further customize by using width utilities, create your own unique Sass, or use inline styles.https://www.tutorialspoint.com/bootstrap/examples/collapse_horizontal.php
Example
You can edit and try running this code using Edit & Run option.
<!DOCTYPE html><html lang="en"><head><title>Bootstrap plugin - Collapse</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><p><button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseWidthExample" aria-expanded="false" aria-controls="collapseWidthExample">Collapse With Toggle Width </button></p><div style="min-height: 120px;"><div class="collapse collapse-horizontal" id="collapseWidthExample"><div class="card card-body" style="width: 300px;"> The collapse plugin supports horizontal collapsing. </div></div></div></body></html></pre>
Multiple toggles and targets
Multiple targets can be used to toggle multiple elements assingning them to a common group and using a single <button> or <a> tag to hide/show. Following points helps us understand this better:
- By assigning the common class in the data-bs-target attribute of the <button> or <a>, an element can reference multiple elements to show and hide them.
- 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.
Example
You can edit and try running this code using Edit & Run option.
<!DOCTYPE html><html lang="en"><head><title>Bootstrap plugin - Collapse</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><p><a class="btn btn-primary" data-bs-toggle="collapse" href="#multiCollapseExample1" role="button" aria-expanded="false" aria-controls="multiCollapseExample1">Collapse First Item</a><button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#multiCollapseExample2" aria-expanded="false" aria-controls="multiCollapseExample2">Collapse Second Item</button><button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target=".multi-collapse" aria-expanded="false" aria-controls="multiCollapseExample1 multiCollapseExample2">Collapse Both Elements</button></p><div class="row"><div class="col"><div class="collapse multi-collapse" id="multiCollapseExample1"><div class="card card-body">Example of multiple collpase and targets. </div></div></div><div class="col"><div class="collapse multi-collapse" id="multiCollapseExample2"><div class="card card-body"> Example of multiple collapse and targets. </div></div></div></div></body></html></pre>
Accessibility
- Use aria-expanded to communicate collapsible element's status to assistive technology. Set aria-expanded="false" for closed collapsible elements and aria-expanded="true" for open ones.
- The plugin toggles the attribute on the control based on whether the collapsible element is open or closed. Apply role="button" if the control element's HTML element is not a button.
- Modern screen readers and similar assistive technologies make use of the data-bs-target attribute to provide users with additional shortcuts to navigate directly to the collapsible element itself.
Leave a Reply