Collpasev

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
    &lt;/a&gt;&lt;button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample"&gt;
      Collapse using button
    &lt;/button&gt;&lt;/p&gt;&lt;div class="collapse" id="collapseExample"&gt;&lt;div class="card card-body"&gt;
      The collapse JavaScript plugin used to display and hide content.
    &lt;/div&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</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 
  &lt;/button&gt;&lt;/p&gt;&lt;div style="min-height: 120px;"&gt;&lt;div class="collapse collapse-horizontal" id="collapseWidthExample"&gt;&lt;div class="card card-body" style="width: 300px;"&gt;
      The collapse plugin supports horizontal collapsing.
    &lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</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.
        &lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class="col"&gt;&lt;div class="collapse multi-collapse" id="multiCollapseExample2"&gt;&lt;div class="card card-body"&gt;
          Example of multiple collapse and targets.
        &lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</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.

Comments

Leave a Reply

Your email address will not be published. Required fields are marked *