We Keep Coding

How to collapse all div and dynamically change the button

I am trying to write a page with collapse function, but I can only achieve single div collapse by boostrap. How to write a function to collapse all div and change the button content like "Collapse all-" to "Expand all+"?
https://codesandbox.io/s/elated-poincare-skugzl
<div class="p-3 text-end">
<a class="text-primary" data-bs-toggle="collapse" href="#question">Collapse All-</a>
</div>
<a data-bs-toggle="collapse" href="#q11">
<div class="bg-light rounded position-relative mt-4">
<div class="container-fluid p-4 overflow-hidden">
<span class="d-inline-block fw-bold">1. What should I do ?</span>
<span class="float-end fw-bold">+</span>
<div class="collapse mt-3" id="q11">
<p class="mb-0">
Please help.
</p>
</div>
</div>
</div>
</a>
<a data-bs-toggle="collapse" href="#q12">
<div class="bg-light rounded position-relative mt-4">
<div class="container-fluid p-4 overflow-hidden">
<span class="d-inline-block fw-bold">2. What should I do?</span>
<span class="float-end fw-bold">+</span>
<div class="collapse mt-3" id="q12">
<p class="mb-0">
please help
</p>
</div>
</div>
</div>
</a>

Toggle the show class:
function changeVisibility(){
document.querySelectorAll(".collapse").forEach(div => div.classList.toggle("show"))
}
Code

Bootstrap 5 Button collapse and carousel

I want to implement two buttons with Bootstrap 5. One button activates two JavaScript functions that open a bootstrap carousel. The other button is a simple collapse button that should open a long text string.
The collapse button does not work. I assume that it has something to do with the way I have implemented Bootrap 5. However, I cannot figure out a solution.
function toggle_visibility(id) {
var e = document.getElementById(id);
if(e.style.display === 'block')
e.style.display = 'none';
else
e.style.display = 'block';
}
function blur_function(id) {
var g = document.getElementById(id);
if(g.style.filter === "blur(5px)")
g.style.filter = "none";
else
g.style.filter = "blur(5px)";
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
<button id="button_search_decision" type="button" class="btn btn-primary" onclick="blur_function('tax'); toggle_visibility('carouselExampleControls')">Belege einsehen</button>
<div id="carouselExampleControls" class="carousel slide" data-bs-ride="carousel" data-ride="carousel" data-bs-interval="false">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="..." class="d-block w-100" alt="Bild 1">
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="Bild2">
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="Bild 3">
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="Bild 4">
</div>
</div>
<button class="carousel-control-prev" type="button" data-target="#carouselExampleControls" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-target="#carouselExampleControls" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
Button with data-bs-target
</button>
<div class="collapse" id="collapseExample">
<div class="card card-body">
Lorem ipsum dolor sit amet.
</div>
</div>

As of mid-2022, despite the claims from otree's documentation, it does not work properly with Bootstrap.
There are way too many missing indications in the documentation which makes bootstrap virtually unusable.
My advice is to focus on manually coding the bootstrap elements whenever possible. Accordions are easy, you can check one example here that does not use javascript.
Unfortunately I cannot comment on the carousel.
This is probably not the answer you were looking for, but unfortunately otree5 is nowhere near to have a working bootstrap implementation.

Bootstrap multiple collapse togglers in same navbar

I'm just getting started trying to make a new bootstrap site and want to have the search bar as part of a seperate collapse toggle. Essentially on the right of the navbar I want the search bar toggle and then the menu toggle.
I have the following questions:
How can I alight the two buttons so they sit next to each other on the right side? One of them seems to sit in the middle right now and I'm not sure why.
Since I separated the form into a different DIV it seems to not align to the right side of the page anymore, it is indented a bit. Why is that?
I only one of the collapsed menus to be open at a time. E.g. if the search is open and I tap the menu toggle I want it to close the search and vice versa.
This is what I have so far. I know it's near default but I'm just getting started and am quite new to bootstrap.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>
<!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">
<title>Bootstrap - Prebuilt Layout</title>
<!-- Bootstrap -->
<link href="css/bootstrap-4.4.1.css" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container">
<a class="navbar-brand" href="#">Demo</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSearch" aria-controls="navbarSearch" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarContent" aria-controls="navbarContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" 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-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</div>
<div class="collapse navbar-collapse" id="navbarSearch">
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</div>
</nav>
<div class="jumbotron jumbotron-fluid text-center">
<h1 class="display-4">Bootstrap with Dreamweaver</h1>
<p class="lead">Easily build your page using the Bootstrap components from the Insert panel.</p>
<hr class="my-4">
<p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
<p class="lead">
<a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
</p>
</div>
<div class="container">
<div class="row text-center">
<div class="col-lg-6 offset-lg-3">Click outside the blue container to select this <strong>row</strong>. Columns are always contained within a row. <strong>Rows are indicated by a dashed grey line and rounded corners</strong>. </div>
</div>
<br>
<hr>
<br>
<div class="row">
<div class="col-md-4">
<div class="card">
<img class="card-img-top" src="images/card-img.png" alt="Card image cap">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<br><br>
Go somewhere
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
Card link
Another link
</div>
</div>
<br>
<br/>
<div class="card">
<div class="card-header">
Featured
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Vestibulum at eros</li>
</ul>
</div>
</div>
<div class="col-md-4">
<div class="card">
<img class="card-img-top" src="images/card-img.png" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some text to build on the card's content.</p>
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
</ul>
<div class="card-body">
Card link
Another link
</div>
</div>
</div>
</div>
<br/>
<br/>
<div class="row">
<div class=" col-md-4"> Click here to select this<strong> column.</strong> Always place your content within a column. Columns are indicated by a dashed blue line. </div>
<div class="col-md-4 "> You can <strong>resize a column</strong> using the handle on the right. Drag it to increase or reduce the number of columns.</div>
<div class="col-md-4 "> You can <strong>offset a column</strong> using the handle on the left. Drag it to increase or reduce the offset. </div>
</div>
<br/>
<br/>
<div class="row">
<div class="col-md-6 text-center">
<div class="card">
<div class="card-body">
<h3>Adding <strong>Buttons</strong></h3>
<p>Quickly add buttons to your page by using the button component in the insert panel. </p>
<button type="button" class="btn btn-info btn-md">Info Button</button>
<button type="button" class="btn btn-success btn-md">Success Button</button>
</div>
</div>
</div>
<div class="text-center col-md-6">
<div class="card">
<div class="card-body">
<h3>Adding <strong>Badges</strong></h3>
<p>Using the insert panel, add badge to your page by using the badge component.</p>
<span class="badge badge-info">Info Badge</span> <span class="badge badge-danger">Danger Badge</span>
</div>
</div>
</div>
</div>
<br>
<hr>
<div class="row">
<div class="text-center col-lg-6 offset-lg-3">
<h4>Footer </h4>
<p>Copyright © 2020 · All Rights Reserved · <a href="#" >My Website</a></p>
</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/jquery-3.4.1.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/popper.min.js"></script>
<script src="js/bootstrap-4.4.1.js"></script>
</body>
</html>

1.: Simply add them to a separate node. The container has a flex-settings set, which align the child-nodes to fill 100% width with automatical spacing.
To overcome this, a new child node or different flex-settings are required.
<div class="container">
<a class="navbar-brand" href="#">Demo</a>
<div>
<a ...></a>
<a ...></a>
</div>
</div>
I mentioned this behavior some time ago here.
2.: The class .container adds margin to the left and right side and is flex-container, which varies by the break-point. Other classes like .row compensate this and use negative values to rearrange the content.
Bootstrap also offers example which will help you with the alignment in the navbar using ml-auto.
3.: If you want to open only one at a time, you should combine the buttons with the tab-handling. The accordion example might be the right choice. In the end it doesn't matter where you place the buttons or links, as long as the ids match with the content they have to display.

Problem with carousel while loading image dynamically

I have used bootstrap material carousel. It works fine when I load image statically.Like:
<div class="row" >
<div class="container-fluid">
<div id="carouselExampleFade" class="carousel slide carousel-fade" data-ride="carousel" data-interval="1000">
<div class="carousel-inner">
<div class="carousel-item active">
<div class="view">
<img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(15).jpg" alt="First slide">
<div class="mask rgba-black-slight"></div>
</div>
<div class="carousel-caption">
<h3 class="h3-responsive">First Event</h3>
<p>This is our first event.</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(16).jpg" alt="Second slide">
<div class="carousel-caption">
<h3 class="h3-responsive">Second Event</h3>
<p>This is our second event.</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(17).jpg" alt="Third slide">
<div class="carousel-caption">
<h3 class="h3-responsive">Third Event</h3>
<p>This is our third event.</p>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleFade" role="button" data-slide="prev">
<i class="material-icons">keyboard_arrow_left</i>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleFade" role="button" data-slide="next">
<i class="material-icons">keyboard_arrow_right</i>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
But when I load images from database i.e dynamically, carousel's images splits in block view and carousel doesn't works anymore. Like when I load in this way:
<div class="row" >
<div class="container-fluid">
<div id="carouselExampleFade" class="carousel slide carousel-fade" data-ride="carousel" data-interval="1000">
<div class="carousel-inner">
{{#each events}}
<div class="carousel-item active">
<div class="view">
<img class="d-block w-100" src="/uploads/{{file}}" alt="First slide">
<div class="mask rgba-black-slight"></div>
</div>
<div class="carousel-caption">
<h3 class="h3-responsive">{{title}}</h3>
<p>{{description}}</p>
</div>
</div>
{{/each}}
</div>
<a class="carousel-control-prev" href="#carouselExampleFade" role="button" data-slide="prev">
<i class="material-icons">keyboard_arrow_left</i>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleFade" role="button" data-slide="next">
<i class="material-icons">keyboard_arrow_right</i>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
When I load in this way images are seen in block view one after another instead of carousel.
I can see those images but not as a carousel. I mean I am getting images from back end but they are not displayed well.
For kind information I have used node js and handlebars as template engine.
What is wrong here? I am new to node and sorry if it was a simple question.

The class active is included in all slides, that's why all of them are visible.
FIrst for all, remove the class active in the slides, and with jQuery you can: $('.carousel-item:first-child').addClass('active').
https://api.jquery.com/first-child-selector/
This will add the class active for the first node .carousel-item finded.
Hope it helped.
Cheers.

Managing width of a carousel-indicators

I want to use custom carousel-indicators. I want to use three divs for the indicators of col-md-4 class. My code is:
<div class="row carousel-indicators">
<div style="background-color:red;" class="col-md-4" data-target="#homeCarousel" data-slide-to="0" class="active">
First
</div>
<div style="background-color:green;" class="col-md-4" data-target="#homeCarousel" data-slide-to="1">
Second
</div>
<div style="background-color:blue;" class="col-md-4" data-target="#homeCarousel" data-slide-to="2">
Third
</div>
</div>
But, it is not working properly. On clicking any of the tab, the div collapses.
Please help me to solve this.
Edit 1:
The full code is:
<div class="container-fluid">
<div id="homeCarousel" class="carousel slide" data-ride="carousel">
<div class="container">
<div class="row carousel-indicators">
<div style="background-color:red;" class="col-md-4" data-target="#homeCarousel" data-slide-to="0" class="active">
First
</div>
<div style="background-color:green;" class="col-md-4" data-target="#homeCarousel" data-slide-to="1">
Second
</div>
<div style="background-color:blue;" class="col-md-4" data-target="#homeCarousel" data-slide-to="2">
Third
</div>
</div>
</div>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img style="width:100%;height:90%;" src="https://www.google.com/logos/doodles/2014/world-cup-2014-51-5668472285560832.2-hp.gif">
<div class="carousel-caption">
</div>
</div>
<div class="item">
<img style="width:100%;height:90%;" src="http://i.forbesimg.com/media/lists/companies/google_416x416.jpg">
<div class="carousel-caption">
</div>
</div>
<div class="item">
<img style="width:100%;height:90%;" src="http://i.forbesimg.com/media/lists/companies/google_416x416.jpg">
<div class="carousel-caption">
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#homeCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#homeCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>

The problem was that the Carousel JS was appending the class of the buttons with active which overrides its width to 12px and height to 12px. Try the below code.
.carousel-indicators .col-md-4.active {
width: 33.33%;
height: auto;
}
JSfiddle

You are close! Since Bootstrap uses media queries, each particular class applies to a certain screen size. Relevant part of Bootstrap documentation:
http://getbootstrap.com/css/#grid-options
The above link describes behavior at each screen size. In your code, you only specify the col-md-4 class; by adding col-sm-4 col-lg-4, you should cover all use cases.
Updated Fiddle: http://jsfiddle.net/dmkzu8eL/2/
EDIT: So, I misread the question initially. Essentially, the .active class is appended to the carousel indicator corresponding to the active item in the carousel. This class specifies a width, height, and margin in terms of px, which is why it appears to collapse. Using the following CSS, we can stop the div from collapsing fully and hiding the text within:
#homeCarousel .carousel-indicators div.active
{
width:initial;
height:initial;
margin:initial;
}
With that said, it doesn't stop the .active div from shrinking down to the size of the text contained within, as you still would like to indicate to the user the position of the carousel, correct?
Updated Fiddle #2:http://jsfiddle.net/dmkzu8eL/12/