Close old Collapse when I open new Collapse in Bootstrap [closed] - javascript

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 1 year ago.
Improve this question
I have a Bootstrap Collapse. The old collapse doesn't close when I open new collapse. Is there anything possible to close old collapse when I open new one?
<div class="my-2">
<a class="btn btn-success text-start form-control fs-3" data-bs-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
<i class="fas fa-minus"></i> 1. PRODAM10 DAMLA NEDİR?
</a>
<div class="collapse" id="collapseExample">
<div class="card card-body border-4 fs-4">
lorem ipsum...
</div>
</div>
</div>
<div class="my-2">
<a class="btn btn-success text-start form-control fs-3" data-bs-toggle="collapse" href="#collapseExample2" role="button" aria-expanded="false" aria-controls="collapseExample2">
<i class="fas fa-minus"></i> 2. Nasıl Etki Eder?
</a>
<div class="collapse" id="collapseExample2">
<div class="card card-body border-4 fs-4">
lorem ipsum...
</div>
</div>
</div>

Bootstrap v4:
You need to use an accordion as a parent and add data-parent to the collapseables
Bootstrap documentation v4
<div id="accordion">
<div className="my-2">
<a className="btn btn-success text-start form-control fs-3" data-bs-toggle="collapse" href="#collapseExample"
role="button" aria-expanded="false" aria-controls="collapseExample">
<i className="fas fa-minus"></i> 1. PRODAM10 DAMLA NEDİR?
</a>
<div className="collapse" id="collapseExample" data-parent="#accordion">
<div className="card card-body border-4 fs-4">
lorem ipsum...
</div>
</div>
</div>
<div className="my-2">
<a className="btn btn-success text-start form-control fs-3" data-bs-toggle="collapse" href="#collapseExample2"
role="button" aria-expanded="false" aria-controls="collapseExample2">
<i className="fas fa-minus"></i> 2. Nasıl Etki Eder?
</a>
<div className="collapse" id="collapseExample2" data-parent="#accordion">
<div className="card card-body border-4 fs-4">
lorem ipsum...
</div>
</div>
</div>
</div>
Bootstrap V5:
collapsible and accordion are different things
Bootstrap V5 documentation
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="accordion accordion-flush" id="accordionFlushExample">
<div class="accordion-item">
<h2 class="accordion-header" id="flush-headingOne">
<a className="btn btn-success text-start form-control fs-3 accordion-button collapsed" data-bs-toggle="collapse" data-bs-target="#flush-collapseOne" href="#flush-collapseOne"
role="button" aria-expanded="false" aria-controls="flush-collapseOne">
<i className="fas fa-minus"></i> 1. PRODAM10 DAMLA NEDİR?
</a>
</h2>
<div id="flush-collapseOne" class="accordion-collapse collapse" aria-labelledby="flush-headingOne" data-bs-parent="#accordionFlushExample">
<div class="accordion-body">lorem ipsum...</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="flush-headingTwo">
<a className="btn btn-success text-start form-control fs-3 accordion-button collapsed" data-bs-toggle="collapse" data-bs-target="#flush-collapseTwo" href="#flush-collapseTwo"
role="button" aria-expanded="false" aria-controls="flush-collapseOne">
<i className="fas fa-minus"></i> 2. Nasıl Etki Eder?
</a>
</h2>
<div id="flush-collapseTwo" class="accordion-collapse collapse" aria-labelledby="flush-headingTwo" data-bs-parent="#accordionFlushExample">
<div class="accordion-body">lorem ipsum...</div>
</div>
</div>
</div>

Related

vue exchange position between two tags

I am working on an assignment where I have to implement accordion. But there is a complex. I need to exchange the position of two accordions like this-- adode xd example
I have done the accordion part.
<template>
<div>
<div>
<div class="accordion" id="accordionExample">
<div class="accordion-item">
<h2 class="accordion-header " id="headingOne">
<button class="accordion-button " type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
User
</button>
</h2>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="headingTwo">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
View
</button>
</h2>
</div>
<div>
<div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
<div class="accordion-body">
<strong>User Content</strong>
</div>
</div>
<div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
<div class="accordion-body">
<strong>View Content</strong>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
How do I do the task using vue js? Can anyone help?

BS5 accordion disappear every click on header

I'm using BS5 accordion. Comparing to the doc but don't see any difference. Everytime I click header - it's gone.
<link href="//cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js"></script>
<div class="accordion accordion-flush" id="collapseMain">
<div class="accordion-item">
<h2 class="accordion-header" id="collapse1">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse1" aria-expanded="true" aria-controls="collapse1">head1</button>
</h2>
<div id="collapse1" class="accordion-collapse collapse show" aria-labelledby="collapse1" data-bs-parent="#collapseMain">
<div class="accordion-body">
xxx</div>
</div>
</div>
<!-- accordion-item -->
<div class="accordion-item">
<h2 class="accordion-header" id="collapse2">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse2" aria-expanded="false" aria-controls="collapse2">head2</button>
</h2>
<div id="collapse2" class="accordion-collapse collapse " aria-labelledby="collapse2" data-bs-parent="#collapseMain">
<div class="accordion-body">
xxx</div>
</div>
</div>
<!-- accordion-item -->
<div class="accordion-item">
<h2 class="accordion-header" id="collapse3">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse3" aria-expanded="false" aria-controls="collapse3">head3</button>
</h2>
<div id="collapse3" class="accordion-collapse collapse " aria-labelledby="collapse3" data-bs-parent="#collapseMain">
<div class="accordion-body">
xxx</div>
</div>
</div>
<!-- accordion-item -->
</div>
<!-- accordion accordion-flush -->
it's because you are using id="collapse1",
bootstrap5 supports id="heading1"
<h2 class="accordion-header" id="heading1">

Bootstrap accordion unfold while scrolling

I would like to make the accordion which is shown below in the code in a way that all are unfolding while the user is scrolling down. At the moment only the first is unfold and the other are going to be unfold, when the user clicks the headline. How can I achieve this?
<div class="accordion" id="accordionExample">
<div class="card">
<div class="card-header" id="headingOne">
<h1 class="mb-0">
<button class="btn" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
A
</button>
</h1>
</div>
<div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
<div class="card-body">
Text
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingTwo">
<h2 class="mb-0">
<button class="btn collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="true" aria-controls="collapseTwo">
B
</button>
</h2>
</div>
<div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
<div class="card-body">
Text
<ul>Darum</ul>
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingThree">
<h2 class="mb-0">
<button class="btn collapsed" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="true" aria-controls="collapseThree">
C
</button>
</h2>
</div>
<div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
<div class="card-body">
Text
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingFour">
<h2 class="mb-0">
<button class="btn collapsed" type="button" data-toggle="collapse" data-target="#collapseFour" aria-expanded="false" aria-controls="collapseFour">
D
</button>
</h2>
</div>
<div id="collapseFour" class="collapse" aria-labelledby="headingFour" data-parent="#accordionExample">
<div class="card-body">
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingFive">
<h2 class="mb-0">
<button class="btn collapsed" type="button" data-toggle="collapse" data-target="#collapseFive" aria-expanded="false" aria-controls="collapseFive">
E
</button>
</h2>
</div>
<div id="collapseFive" class="collapse" aria-labelledby="headingFive" data-parent="#accordionExample">
<div class="card-body">
</div>
</div>
</div>
</div>
You can use .is(':visible') and create a loop for each accordion item.
For example: if $('#headingFour').is(':visible') then trigger click on $('#headingFour button')!

Collapse inner section remains uncollapsed, when one inner section collapses

I created a collapsable menu with bootstrap.
The main collapse work as expected; when one button is selected, other collapses.
Inside each collapse I added other collapsable buttons.
However, when there is another collapse inside it doesn't collapse the other section.
When "content 2 inner" button is selected, after that "content 1 ineer" button is selected both remains uncollapsed
You can check https://codepen.io/snarex/pen/WqrvpP
<div class="container" id="myGroup">
<div class="row">
<div class="col-lg-12">
<button class="btn btn-primary" data-toggle="collapse" href="#collapseExample" role="button"
aria-expanded="false" aria-controls="collapseExample">
content 1
</button>
<div class="collapse" id="collapseExample" data-parent="#myGroup">
<div class="card card-body">
<div class="row" id="myGroup1">
<div class="col-lg-12">
<button class="btn btn-primary" data-toggle="collapse" href="#collapseExample11"
role="button" aria-expanded="false" aria-controls="collapseExample11">
content 1 inner
</button>
<div class="collapse" id="collapseExample11" data-parent="#myGroup1">
<div class="card card-body">
Content 1 inner one here
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<button class="btn btn-primary" type="button" data-toggle="collapse"
data-target="#collapseExample12" aria-expanded="false" aria-controls="collapseExample2">
Content 2 inner
</button>
<div class="collapse" id="collapseExample12" data-parent="#myGroup1">
<div class="card card-body">
Content 2 inner here
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row mt-2">
<div class="col-lg-12">
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample2"
aria-expanded="false" aria-controls="collapseExample2">
Content 2
</button>
<div class="collapse" id="collapseExample2" data-parent="#myGroup">
<div class="card card-body">
<div class="row" id="myGroup2">
<div class="col-lg-12">
<button class="btn btn-primary" data-toggle="collapse" href="#collapseExample21"
role="button" aria-expanded="false" aria-controls="collapseExample21">
content 1 inner
</button>
<div class="collapse" id="collapseExample21" data-parent="#myGroup2">
<div class="card card-body">
Content inner one here
</div>
</div>
</div>
</div>
<div class="row mt-2">
<div class="col-lg-12">
<button class="btn btn-primary" type="button" data-toggle="collapse"
data-target="#collapseExample22" aria-expanded="false"
aria-controls="collapseExample22">
Content 2 inner
</button>
<div class="collapse" id="collapseExample22" data-parent="#myGroup2">
<div class="card card-body">
Content 2 inner here
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
The data-parent needs to be the parent of both, not a sibling like you have with the rows. Make the card the parent...
https://www.codeply.com/go/DRxAXQF7E7
<div class="container" id="myGroup">
<div class="row">
<div class="col-lg-12">
<button class="btn btn-primary" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
content 1
</button>
<div class="collapse" id="collapseExample" data-parent="#myGroup">
<div class="card card-body" id="myGroup1">
<div class="row">
<div class="col-lg-12">
<button class="btn btn-primary" data-toggle="collapse" href="#collapseExample11" role="button" aria-expanded="false" aria-controls="collapseExample11">
content 1 inner
</button>
<div class="collapse" id="collapseExample11" data-parent="#myGroup1">
<div class="card card-body">
Content 1 inner one here
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample12" aria-expanded="false" aria-controls="collapseExample2">
Content 2 inner
</button>
<div class="collapse" id="collapseExample12" data-parent="#myGroup1">
<div class="card card-body">
Content 2 inner here
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row mt-2">
<div class="col-lg-12">
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample2" aria-expanded="false" aria-controls="collapseExample2">
Content 2
</button>
<div class="collapse" id="collapseExample2" data-parent="#myGroup">
<div class="card card-body" id="myGroup2">
<div class="row">
<div class="col-lg-12">
<button class="btn btn-primary" data-toggle="collapse" href="#collapseExample21" role="button" aria-expanded="false" aria-controls="collapseExample21">
content 1 inner
</button>
<div class="collapse" id="collapseExample21" data-parent="#myGroup2">
<div class="card card-body">
Content inner one here
</div>
</div>
</div>
</div>
<div class="row mt-2">
<div class="col-lg-12">
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample22" aria-expanded="false" aria-controls="collapseExample22">
Content 2 inner
</button>
<div class="collapse" id="collapseExample22" data-parent="#myGroup2">
<div class="card card-body">
Content 2 inner here
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

How to move up/down a single accordion html elements

I've got multiple accordions from Bootstrap 4. I want a single accordion to move up/down when I click its corresponding arrow. How do I go about this in JS or jQuery?
<div class="card">
<div class="card-header" role="tab" id="headingOne">
<h3 class="mb-0">
<a data-toggle="collapse" data-parent="#testchild" href="#section-1" aria-expanded="true" aria-controls="collapseOne">
Disco Full Overview
</a>
<a href="#">
<button class="btn btn-success pull-right">
<i class="mdi mdi-tooltip-edit"></i> Edit
</button>
</a>
<button class="btn btn-link btn-sm pull-right">
<i class="mdi mdi-chevron-down" style="font-size: 21px"></i>
</button>
<button class="btn btn-link btn-sm pull-right">
<i class="mdi mdi-chevron-up" style="font-size: 21px"></i>
</button>
</h3>
</div>
<div id="section-1" class="collapse" role="tabpanel" aria-labelledby="headingOne">
<div class="card-block">
...
</div>
</div>
</div>
<div class="card">
<div class="card-header" role="tab" id="headingOne">
<h3 class="mb-0">
<a data-toggle="collapse" data-parent="#testchild" href="#section-2" aria-expanded="true" aria-controls="collapseOne">
Disco Test
</a>
<a href="#">
<button class="btn btn-success pull-right">
<i class="mdi mdi-tooltip-edit"></i> Edit
</button>
</a>
<button class="btn btn-link btn-sm pull-right">
<i class="mdi mdi-chevron-down" style="font-size: 21px"></i>
</button>
<button class="btn btn-link btn-sm pull-right">
<i class="mdi mdi-chevron-up" style="font-size: 21px"></i>
</button>
</h3>
</div>
<div id="section-2" class="collapse" role="tabpanel" aria-labelledby="headingOne">
<div class="card-block">
...
</div>
</div>
</div>
I've already set up the arrow keys but I don't know how to do this.
Edit.
I've found about insertafter and insertbefore but I don't know how parent and child works. Because the up/down button is child to the other elements and I don't know how to address the entire accordion.

Categories