unable to collapse using Bootstrap Collapse

Question

I'm working on a website which is used to display the news using vertically collapsing accordions.I'm using an external API to fetch the news. I need only news to be visible at a time. When I click on the 2nd news title, I need the 1st news description to be hidden/collapsed. Similarly, when I click on any of the news , I want the rest to be kept collapsed/hidden , but this doesn't work . (See web page snip )

Here are the html and JS codes.

JS :

 let display = document.getElementById("display"); const xhr = new XMLHttpRequest; xhr.open("GET", "https://newsapi.org/v2/top-headlines?sources=bbc-news&apiKey=70893d07e43d413faf7813e13df0f8aa", true) xhr.onload = function () { let strHtml = ""; if (this.status === 200) { let newsObj = JSON.parse(this.responseText); let newsArticles = newsObj.articles; console.log(newsArticles) newsArticles.forEach(function (element, index) { //newsArticle --> an array which contains the news data including the title and description of the news let str = `<div class="accordion-item"> <h2 class="accordion-header" id="heading${index}"> <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse${index}" aria-expanded="false" aria-controls="collapse${index}"> ${element.title} </button> </h2> <div id="collapse${index}" class="accordion-collapse collapse" aria-labelledby="heading${index}" data-bs-parent="#accordionExample"> <div class="accordion-body"> <strong> ${element.description}</strong> <a href="${element.url}" target="_blank" <button type="button" class="btn btn-primary">Learn more</button> </a> </div> </div> </div>` strHtml += str; //append news data into strHtml string }); } else { console.log("some error") } display.innerHTML = strHtml; //to display the news on the page } xhr.send();

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"> </head> <body> <nav class="navbar navbar-expand-lg navbar-dark bg-dark"> <div class="container-fluid"> <a class="navbar-brand" href="#">BBC News</a> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav me-auto mb-2 mb-lg-0"> <li class="nav-item"> <a class="nav-link active" aria-current="page" href="#">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false"> Dropdown </a> <ul class="dropdown-menu" aria-labelledby="navbarDropdown"> <li><a class="dropdown-item" href="#">Action</a></li> <li><a class="dropdown-item" href="#">Another action</a></li> <li> <hr class="dropdown-divider"> </li> <li><a class="dropdown-item" href="#">Something else here</a></li> </ul> </li> <li class="nav-item"> <a class="nav-link disabled">Disabled</a> </li> </ul> <form class="d-flex"> <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search"> <button class="btn btn-outline-success" type="submit">Search</button> </form> </div> </div> </nav> <div class="container my-3"> <h3><span class="badge bg-primary">Top news</span> </h3> </div> <hr> <div class="container accordionExample" > <div class="accordion" id="display"> </div> </div> </div> <script src="./JS/index.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script> </body> </html>

Answer 1

You need a <div> around your accordion with a parent ID:

<div class="accordion" id="accordionExample">

And in your .collapse element you need that

 data-bs-parent="#accordionExample"

You already have that. So I guess it's just the missing wrapper.

Answer 2

trying replacing the 'str' variable with the below one. It should work then.

let str = `<div class="card">
        <div class="accordion-header" id="heading${index}">
            <h5 class="mb-0">
                <button class="btn" data-toggle="collapse" data-target="#collapse${index}" aria-expanded="true" aria-controls="collapse${index}">
                ${element.title}
                </button>
            </h5>
        </div>

        <div id="collapse${index}" class="collapse collapse" aria-labelledby="heading${index}">
            <div class="accordion-body">
            <strong>  ${element.description}</strong>
            <a href="${element.url}" target="_blank" <button type="button" class="btn btn-primary">Learn more</button> </a>
          </div>
        </div>
    </div>`

unable to collapse using Bootstrap Collapse

Question

2 answers

solution1
0 ACCPTED 2021-10-27 08:49:22

solution2
0 2021-10-27 09:20:05

unable to collapse using Bootstrap Collapse

Question

2 answers

solution1 0 ACCPTED 2021-10-27 08:49:22

solution2 0 2021-10-27 09:20:05

solution1
0 ACCPTED 2021-10-27 08:49:22

solution2
0 2021-10-27 09:20:05