Updating the functionality of Bootstrap 4 accordions

Question

Updating the functionality of Bootstrap 4 accordions

Utilizing HTML templates based on Bootstrap 4.3.1, I am delivering educational content to my students. In the current setup, all accordion panels are closed when the page loads, and each panel can be opened independently of others.

To see a live example, visit this CodePen link: https://codepen.io/hagelslag1001/pen/MWGeZJr

Here is the HTML code snippet:

<h2>Accordion: Group of 2</h2>
<p class="small">Accordion: start copy</p>
<!-- Accordion headings should be changed to respect page hierarchy -->
<div class="accordion shadow mb-5">
   <div class="card">
      <div class="card-header">
         <h2 class="card-title">
            Accordion 1 of 2
         </h2>
      </div>
      <div class="collapse">
         <div class="card-body">
            <p>Insert Accordion 1 of 2 content here.</p>
         </div>
      </div>
   </div>
   <div class="card">
      <div class="card-header">
         <h2 class="card-title">
            Accordion 2 of 2
         </h2>
      </div>
      <div class="collapse">
         <div class="card-body">
            <p>Insert Accordion 2 of 2 content here.</p>
         </div>
      </div>
   </div>
</div>
<p class="small">Accordion: end copy</p>

Is there a way to modify this default setting so that only one panel can be open at a time? (Meaning, whenever a new panel opens, the previously open panel closes automatically)

The Bootstrap examples utilize (

data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne"

) to achieve this behavior for accordions in the provided templates

I'm struggling to implement this feature because the structure of the accordion HTML in these templates differs from the Bootstrap 4 examples, which typically use an 'a' or 'button' tag to trigger collapsible events.

javascript html css bootstrap-4 bootstrap-accordion

Answer 1

Answer №1

Here is a more streamlined solution tailored to your specific CodePen example: https://codepen.io/mrtcntn/pen/MWGeZdP

As stated in the Bootstrap 4 documentation found at this link, it is recommended to use only id="accordion" for the top level div. Avoid unnecessary ids such as id="accordion_1" and id="accordion_2".

I have made adjustments by removing redundant code from the JS and ensuring that id="accordion" is properly added at line 18 in the HTML file.

Answer 2

Here is a more streamlined solution tailored to your specific CodePen example: https://codepen.io/mrtcntn/pen/MWGeZdP

As stated in the Bootstrap 4 documentation found at this link, it is recommended to use only id="accordion" for the top level div. Avoid unnecessary ids such as id="accordion_1" and id="accordion_2".

I have made adjustments by removing redundant code from the JS and ensuring that id="accordion" is properly added at line 18 in the HTML file.

Answer 3

Answer №2

To achieve this functionality, you can utilize JavaScript to monitor active classes and only permit one at a time. Below is a simplified example of how this can be implemented.

// Access the DOM elements
let nav = document.querySelector(".nav");

// Event handler function 
const clickHandler = function (e) {
  if (e.target.classList.contains("nav__link")) {
    const link = e.target;
    const siblings = link.closest(".nav").querySelectorAll(".nav__link");

    link.classList.toggle("active");

    // Remove all other active classes except for the clicked one
    siblings.forEach((el) => {
      if (el !== link) el.classList.remove("active");
    });
  }
};

// Add event listener
nav.addEventListener("click", clickHandler);

body {
  font-family: sans-serif;
}

.nav__link {
  display: block;
  width: 100%;
}
.active {
  background: #0f0;
}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
  </head>

  <body>
    <div class="nav">
      <ul class="nav__links">
                <li class="nav__item">
                    <a class="nav__link" href="#accordeon--1">Accordion 1</a>
                </li>
                <li class="nav__item">
                    <a class="nav__link" href="#accordion--2">Accordion 2</a>
                </li>
                <li class="nav__item">
                    <a class="nav__link" href="#accordion--3">Accordion 3</a>
                </li>
                <li class="nav__item">
                    <a class="nav__link" href="#accordion--4"
                        >Accordion 4</a
                    >
                </li>
            </ul>
      </div>
    </div>

    <script src="src/index.js"></script>
  </body>
</html>

Answer 4

To achieve this functionality, you can utilize JavaScript to monitor active classes and only permit one at a time. Below is a simplified example of how this can be implemented.

// Access the DOM elements
let nav = document.querySelector(".nav");

// Event handler function 
const clickHandler = function (e) {
  if (e.target.classList.contains("nav__link")) {
    const link = e.target;
    const siblings = link.closest(".nav").querySelectorAll(".nav__link");

    link.classList.toggle("active");

    // Remove all other active classes except for the clicked one
    siblings.forEach((el) => {
      if (el !== link) el.classList.remove("active");
    });
  }
};

// Add event listener
nav.addEventListener("click", clickHandler);

body {
  font-family: sans-serif;
}

.nav__link {
  display: block;
  width: 100%;
}
.active {
  background: #0f0;
}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
  </head>

  <body>
    <div class="nav">
      <ul class="nav__links">
                <li class="nav__item">
                    <a class="nav__link" href="#accordeon--1">Accordion 1</a>
                </li>
                <li class="nav__item">
                    <a class="nav__link" href="#accordion--2">Accordion 2</a>
                </li>
                <li class="nav__item">
                    <a class="nav__link" href="#accordion--3">Accordion 3</a>
                </li>
                <li class="nav__item">
                    <a class="nav__link" href="#accordion--4"
                        >Accordion 4</a
                    >
                </li>
            </ul>
      </div>
    </div>

    <script src="src/index.js"></script>
  </body>
</html>

Updating the functionality of Bootstrap 4 accordions

Answer №1

Answer №2

Similar questions

Registering a change event for a table's value

Styling Navigation in Internet Explorer 7 and 8

Error in Mongoose validation: "Please provide a value for the 'first' field and the 'last' field."

jQuery: Struggling with removing dynamically generated elements

Cross domain tracking pixel implemented using ASP.NET, jQuery, and AJAX technology

Explore the input from multiple users to uncover the word that appears most frequently among them

Browser resize affects the overlap of DIVs

What is the method for sending a multipart request using request.js?

Adjust the code to enhance the functionality of web components in Sharepoint

Issue with hamburger menu or modal not functioning properly in Rails 4 with Bootstrap 4 alpha3 and JS

Parsing PHP array using JavaScript

Exploring network connectivity using Node.js

Updating HTML content dynamically using Node.js without requiring a page refresh

Is the CSS :not selector failing to operate as expected?

Creating designs using HTML5 and implementing them with JAVA for Android development

Transforming localhost into a server name in a Node.js environment

What is the best way to link my React application with my Express API?

How can the input value be transmitted along with the formArray values?

Incorporating fresh components and newly defined attributes in Angular

Achieving a seamless scrolling effect using CSS