Ways to switch Bootstrap 5 accordion element using JavaScript

Question

Ways to switch Bootstrap 5 accordion element using JavaScript

I am using Bootstrap 5's accordion component and I would like to toggle this component from a custom JavaScript function called toggle, preferably without relying on jQuery.

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c4a6ababb0b7b0b6a5b484f1eaf5eaf5">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
  <title>Hello, world!</title>
</head>

<body>

<button onclick="toggle(event)">Toggle Accordion Item #1</button>

<div class="accordion" id="accordionPanelsStayOpenExample">
  <div class="accordion-item">
    <h2 class="accordion-header" id="panelsStayOpen-headingOne">
      <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#panelsStayOpen-collapseOne" aria-expanded="true" aria-controls="panelsStayOpen-collapseOne">
        Accordion Item #1
      </button>
    </h2>
    <div id="panelsStayOpen-collapseOne" class="accordion-collapse collapse show" aria-labelledby="panelsStayOpen-headingOne">
      <div class="accordion-body">
        <strong>This is the first item's accordion body.</strong> It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
      </div>
    </div>
  </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="7a1815150e090e081b0a3a4f544b544b">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ" crossorigin="anonymous"></script>
<script>
// Function to Toggle Accordion Item #1
function toggle(event) {
  // ???
}
</script>
</body>
</html>

This code snippet was created using resources from https://getbootstrap.com/docs/5.1/getting-started/introduction/ and https://getbootstrap.com/docs/5.1/components/accordion/.

javascript twitter-bootstrap toggle bootstrap-5

Answer 1

Answer №1

For more information on the collapse component, please refer to the documentation.

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="fa9895958e898e889b8abacfd4cbd4cb">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
  <title>Hello, world!</title>
</head>

<body>

<button onclick="toggle(event)">Toggle Accordion Item #1</button>

<div class="accordion" id="accordionPanelsStayOpenExample">
  <div class="accordion-item">
    <h2 class="accordion-header" id="panelsStayOpen-headingOne">
      <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#panelsStayOpen-collapseOne" aria-expanded="true" aria-controls="panelsStayOpen-collapseOne">
        Accordion Item #1
      </button>
    </h2>
    <div id="panelsStayOpen-collapseOne" class="accordion-collapse collapse show" aria-labelledby="panelsStayOpen-headingOne">
      <div class="accordion-body">
        <strong>This is the first item's accordion body.</strong> It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
      </div>
    </div>
  </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="187a77776c6b6c6a7968582d36293629">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ" crossorigin="anonymous"></script>
<script>
// Toggle Accordion Item #1
function toggle(event) {
  var myCollapse = document.getElementsByClassName('collapse')[0];
  var bsCollapse = new bootstrap.Collapse(myCollapse, {
    toggle: true
  });
}
</script>
</body>
</html>

Answer 2

For more information on the collapse component, please refer to the documentation.

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="fa9895958e898e889b8abacfd4cbd4cb">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
  <title>Hello, world!</title>
</head>

<body>

<button onclick="toggle(event)">Toggle Accordion Item #1</button>

<div class="accordion" id="accordionPanelsStayOpenExample">
  <div class="accordion-item">
    <h2 class="accordion-header" id="panelsStayOpen-headingOne">
      <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#panelsStayOpen-collapseOne" aria-expanded="true" aria-controls="panelsStayOpen-collapseOne">
        Accordion Item #1
      </button>
    </h2>
    <div id="panelsStayOpen-collapseOne" class="accordion-collapse collapse show" aria-labelledby="panelsStayOpen-headingOne">
      <div class="accordion-body">
        <strong>This is the first item's accordion body.</strong> It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
      </div>
    </div>
  </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="187a77776c6b6c6a7968582d36293629">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ" crossorigin="anonymous"></script>
<script>
// Toggle Accordion Item #1
function toggle(event) {
  var myCollapse = document.getElementsByClassName('collapse')[0];
  var bsCollapse = new bootstrap.Collapse(myCollapse, {
    toggle: true
  });
}
</script>
</body>
</html>

Answer 3

Answer №2

I made a modification to the toggle function so that it now toggles all the accordions present on the webpage.

function updateToggles(event)
{
    // I added a button to the navigation bar in my SBUCR.aspx
    //<button class="btn btn-outline" type="button" onclick="updateToggles(event)" id="btoggle">▲</button>
    var accordionElements = document.getElementsByClassName('collapse');
    for (let i = accordionElements.length-1; i > 0; i--) // Starting from the last element to skip the navbar hamburger menu at index 0
    {
        //console.log("found" + accordionElements[i].id);
        var bsCollapse = new bootstrap.Collapse(accordionElements[i], {
            toggle: true
        });
    }
}

Answer 4

I made a modification to the toggle function so that it now toggles all the accordions present on the webpage.

function updateToggles(event)
{
    // I added a button to the navigation bar in my SBUCR.aspx
    //<button class="btn btn-outline" type="button" onclick="updateToggles(event)" id="btoggle">▲</button>
    var accordionElements = document.getElementsByClassName('collapse');
    for (let i = accordionElements.length-1; i > 0; i--) // Starting from the last element to skip the navbar hamburger menu at index 0
    {
        //console.log("found" + accordionElements[i].id);
        var bsCollapse = new bootstrap.Collapse(accordionElements[i], {
            toggle: true
        });
    }
}

Ways to switch Bootstrap 5 accordion element using JavaScript

Answer №1

Answer №2

Similar questions

Remove the blue outline in Fancybox when clicked

Dynamic content for tooltips in Angular

React Material-UI TextField with Throttling

How to update a value within a deeply nested array in MongoDB and then sort the data

Triggering multiple functions by clicking on the Icon

Returning a React component only under certain conditions to meet the requirements of a Suspense fallback mechanism

Avoid constantly destroying the Bootstrap Popover

Tips for extracting data from a PHP loop and displaying it in a div element

AngularJS powered edit button for Laravel route parameter

Challenges faced with password hashing in Express.js

Update the content of an HTML element without having direct access to the HTML code

Storing files in DynamoDB using Reactjs is a convenient and efficient way

Automatically increase the dates in two cells once they have passed

The page is not able to be uploaded successfully, receiving a HTTP 200 status

My program is throwing an error due to invalid JSON format

Insert a design layout into a text entry box

What is the best way to arrange this by DateTransaction using a dropdown list?

Layout display issue post redirection in React

Struggling to successfully toggle the visibility of items

Using knockout to data bind a function to an onclick event that takes in multiple parameters