While building an accordion I was able to dynamically get accordion items. The problem now is that they all open at the same time. Is it possible to open them one by one based on ID?
This is my code:
<div class="accordion" id="accordionExample">
<div *ngFor="let task of tasks" 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">
{{task.name}}
</button>
</h2>
<div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
<div class="accordion-body">
{{task.description}}
</div>
</div>
</div>
</div>
I assume the problem is that "collapseOne" is hard-coded but I can't find the solution online.
I haven't experience with accordion. But judging by the code, it seems you need to bind individual IDs to each item. You could try to use the index local variable of the *ngFor directive.
<div class="accordion" id="accordionExample">
<div *ngFor="let task of tasks; let i=index" class="accordion-item">
<h2 class="accordion-header" id="headingOne">
<button
class="accordion-button"
type="button"
data-bs-toggle="collapse{{i}}"
data-bs-target="#collapseOne{{i}}"
aria-expanded="true"
aria-controls="collapseOne{{i}}"
>
{{task.name}}
</button>
</h2>
<div
id="collapseOne{{i}}"
class="accordion-collapse collapse show"
aria-labelledby="headingOne"
data-bs-parent="#accordionExample"
>
<div class="accordion-body">
{{task.description}}
</div>
</div>
</div>
</div>
Related
I have some page content broken up with nested bootstrap accordions. I am using bootstrap 5.
The parent accordion is split between continents, with each panel then containing another accordion split between countries.
My parent accordion acts as expected - selecting 1 continent will close the previously selected continent. However my nested accordions are not closing previously selected country panels as I would expect.
I believe I am setting the value of data-bs-parent appropriately in all cases. What else might be causing this issue?
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.2/dist/css/bootstrap.min.css" integrity="sha384-uWxY/CJNBR+1zjPWmfnSnVxwRheevXITnMqoEIeG1LJrdI0GlVs/9cVSyPYXdcSF" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.2/dist/js/bootstrap.min.js" integrity="sha384-PsUw7Xwds7x08Ew3exXhqzbhuEYmA2xnwc8BuD6SEr+UmEHlX8/MCltYEodzWA4u" crossorigin="anonymous"></script>
<div class="accordion" id="port-accordion">
<div class="accordion-item">
<h2 class="accordion-header" id="accordion-header-one">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-one" aria-expanded="false" aria-controls="collapse-one">
North America
</button>
</h2>
<div id="collapse-one" class="accordion-collapse collapse" aria-labelledby="accordion-header-one" data-bs-parent="#port-accordion" style="">
<div class="accordion-body" data-hotspot="1">
<div class="accordion" id="country-accordion-one">
<div class="accordion-item" id="accordion-item-canada">
<h2 class="accordion-header" id="accordion-header-canada">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-canada" aria-expanded="false" aria-controls="collapse-canada">Canada</button>
</h2>
<div id="collapse-canada" class="accordion-collapse collapse" aria-labelledby="accordion-header-canada" data-bs-parent="#country-accordion-one" style="">
<div class="accordion-body">
<p>Accordion content</p>
</div>
</div>
</div>
<div class="accordion-item" id="accordion-item-mexico">
<h2 class="accordion-header" id="accordion-header-mexico">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-mexico" aria-expanded="false" aria-controls="collapse-mexico">Mexico</button>
</h2>
<div id="collapse-mexico" class="accordion-collapse collapse" aria-labelledby="accordion-header-mexico" data-bs-parent="#country-accordion-one" style="">
<div class="accordion-body">
<p>Accordion content</p>
</div>
</div>
</div>
<div class="accordion-item" id="accordion-item-united-states-of-america">
<h2 class="accordion-header" id="accordion-header-united-states-of-america">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-united-states-of-america" aria-expanded="false" aria-controls="collapse-united-states-of-america">United States Of America</button>
</h2>
<div id="collapse-united-states-of-america" class="accordion-collapse collapse" aria-labelledby="accordion-header-united-states-of-america" data-bs-parent="#country-accordion-one" style="">
<div class="accordion-body">
<p>Accordion content</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="accordion-header-two">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-two" aria-expanded="true" aria-controls="collapse-two">
South America
</button>
</h2>
<div id="collapse-two" class="accordion-collapse collapse show" aria-labelledby="accordion-header-two" data-bs-parent="#port-accordion" style="">
<div class="accordion-body" data-hotspot="2">
<div class="accordion" id="country-accordion-two">
<div class="accordion-item" id="accordion-item-aruba">
<h2 class="accordion-header" id="accordion-header-aruba">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-aruba" aria-expanded="false" aria-controls="collapse-aruba">Aruba</button>
</h2>
<div id="collapse-aruba" class="accordion-collapse collapse" aria-labelledby="accordion-header-aruba" data-bs-parent="#country-accordion-two" style="">
<div class="accordion-body">
<p>Accordion content</p>
</div>
</div>
</div>
<div class="accordion-item" id="accordion-item-curacao">
<h2 class="accordion-header" id="accordion-header-curacao">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-curacao" aria-expanded="true" aria-controls="collapse-curacao">Curacao</button>
</h2>
<div id="collapse-curacao" class="accordion-collapse collapse show" aria-labelledby="accordion-header-curacao" data-bs-parent="#country-accordion-two" style="">
<div class="accordion-body">
<p>Accordion content</p>
</div>
</div>
</div>
<div class="accordion-item" id="accordion-item-trinidad-and-tobago">
<h2 class="accordion-header" id="accordion-header-trinidad-and-tobago">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-trinidad-and-tobago" aria-expanded="true" aria-controls="collapse-trinidad-and-tobago">Trinidad and Tobago</button>
</h2>
<div id="collapse-trinidad-and-tobago" class="accordion-collapse collapse show" aria-labelledby="accordion-header-trinidad-and-tobago" data-bs-parent="#country-accordion-two" style="">
<div class="accordion-body">
<p>Accordion content</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
You need to add the following to your angular.json file:
"scripts": [
"node_modules/bootstrap/dist/js/bootstrap.min.js"
]
I am trying to swap images based on which accordion link you click. For example if you click the first accordion link it will open up that accordion and change the image above the accordion to the image that's in that section. If you click the next on it will open up the accordion for that link and change it to the image in that section. Can someone help me out or point me in the right direction. Thanks for all your help.
Here is my code:
<img src="link to image I want changed" />
<div id="accordion" style="margin-top: 10px">
<div class="card" style="border-color: #FF9106; border-width: 1px;">
<div class="card-header" style="background-color: #ffffff;"
id="headingOne">
<h5 class="mb-0">
<button class="btn btn-link" data-toggle="collapse" data-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne" >
<h5 class="mb-0">first Link</h5>
</button>
</h5>
</div>
<div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
<div class="card-body" style="margin: 10px; background-color:#FDFDFD">
<p><img src="assets/img/station2/Timeline_MTP.svg" /></p>
<ul>
<li><span>....</span></li>
<li><span>....</span></li>
<li><span>....</span></li>
</ul>
</div>
</div>
</div>
<div class="card" style="border-color: #FF9106; border-width: 1px;">
<div class="card-header" style="background-color: #ffffff;" id="headingTwo">
<h5 class="mb-0">
<button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
2nd Link
</button>
</h5>
</div>
<div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordion">
<div class="card-body" style="margin: 10px">
<p><img src="assets/img/station2/Timeline_LTP.svg" /></p>
<ul>
<li><span>....</span></li>
<li><span>....</span></li>
</ul>
</div>
</div>
</div>
<div class="card" style="border-color: #FF9106; border-width: 1px;">
<div class="card-header" style="background-color: #ffffff;" id="headingThree">
<h5 class="mb-0">
<button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
3rd Link
</button>
</h5>
</div>
<div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordion">
<div class="card-body" style="margin: 10px">
<p><img src="assets/img/station2/Timeline_FULL.svg" /></p>
<ul>
<li><span>....</span></li>
<li><span>....</span></li>
</ul>
</div>
</div>
</div>
</div>
Thanks to someone who pointed me in the right direction and then deleted it (not sure why), I have found a solution. I used javascript to replace the images and added it to the button on the accordion.
<script>
function Showpic1()
{
document.getElementById("image").src = "assets/img/station2/Timeline_MTP.svg";
}
function Showpic2()
{
document.getElementById("image").src = "assets/img/station2/Timeline_LTP.svg";
}
function Showpic3()
{
document.getElementById("image").src = "assets/img/station2/Timeline_FULL.svg";
}
</script>
HTML
Medium-Term Projections (up to 5 years)
<div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
<div class="card-body" style="margin: 10px; background-color:#FDFDFD">
<ul>
<li><span>...</span></li>
</ul>
</div>
</div>
</div>
<div class="card" style="border-color: #FF9106; border-width: 1px;">
<div class="card-header" style="background-color: #ffffff;" id="headingTwo">
<h5 class="mb-0">
<button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo" onclick="Showpic2()">
Long-term macroeconomic projections (beyond 5 years)
</button>
</h5>
</div>
<div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordion">
<div class="card-body" style="margin: 10px">
<ul>
<li><span>...</span></li>
</ul>
</div>
</div>
</div>
<div class="card" style="border-color: #FF9106; border-width: 1px;">
<div class="card-header" style="background-color: #ffffff;" id="headingThree">
<h5 class="mb-0">
<button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree" onclick="Showpic3()">
Long-term growth projections (beyond 5 years) need to consider the stage of development.
</button>
</h5>
</div>
<div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordion">
<div class="card-body" style="margin: 10px">
<ul>
<li><span>...</span></li>
</ul>
</div>
</div>
</div>
</div>
I've read previous threads that cover this issue for navbars and menus but it does not seem to apply. I have a very simple example: two cards, one opened by default the other collapsed. When I try to expand the second card by pressing Card 2 Button, it opens but then immediately closes again. I am not sure what I'm doing wrong.
Example here:
<div id="accordion">
<div class="card">
<div class="card-header" id="header1">
<h5 class="mb-0">
<button class="btn btn-link" data-toggle="collapse" data-target="#collapse1" aria-expanded="true" aria-controls="collapse1">
Card 1 Button
</button>
</h5>
</div>
<div id="collapse1" class="collapse show" aria-labelledby="header1" data-parent="#accordion">
<div class="card-body">
Card 1 Content
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="header2">
<h5 class="mb-0">
<button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapse2" aria-expanded="false" aria-controls="collapse2">
Card 2 Button
</button>
</h5>
</div>
<div id="collapse2" class="collapse" aria-labelledby="header2" data-parent="#accordion">
<div class="card-body">
Card 2 Content
</div>
</div>
</div>
</div>
Are you sure you are using Bootstrap 4?
In bootstrap 3 it works like following,
You need to use in class instead of show to make it open by default at the page load.
<div id="collapse1" class="collapse in" aria-labelledby="header1" data-parent="#accordion">
<div class="card-body">
Card 1 Content
</div>
</div>
jsFiddle
https://jsfiddle.net/0uk0xuvd/
Check your bootstrap version that your are importing.
I'm using the bootstrap accordion as a unique way of creating a form. Basically the form has 7 parts each in its own accordion panel. Right now I have it just as I want where they are all collapsed and when you open the first accordion there is a button that links to the second accordion. This is exactly how I want it to work. However is there a way to hide the other accordion panels until the "next" button has been selected?
For example when I load the page I just want them to be able to see " 1. Select Features " and when they open that and select their items when they press the next button thats when the second panel becomes visible and opens up. and so on.
I'm assuming I can maybe do something where I have them hidden and the button triggers it to be visible? I've been looking for examples of something like this but I can't find anything. I know this site isn't a code writing service so if someone can just point me to the right direction I can do the rest.
<div class="panel-group" id="accordion">
<div class="panel panel-default" id="panel1">
<div class="panel-heading">
<h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne"> 1. Select Features </a> </h4>
</div>
<div id="collapseOne" class="panel-collapse collapse">
<div class="panel-body">
Testing 1
<button type="button" class="btn btn-success" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo"> Next </button>
</div>
</div>
</div>
<div class="panel panel-default" id="panel2">
<div class="panel-heading">
<h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo"> 2. Select Styles </a> </h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse">
<div class="panel-body">
Testing 2
<button type="button" class="btn btn-success" data-toggle="collapse" data-parent="#accordion" href="#collapseThree"> Next </button>
</div>
</div>
</div>
<div class="panel panel-default" id="panel3">
<div class="panel-heading">
<h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapseThree"> 3. Contact Info </a> </h4>
</div>
<div id="collapseThree" class="panel-collapse collapse">
<div class="panel-body">
Testing 3
<button type="button" class="btn btn-success" data-toggle="collapse" data-parent="#accordion" href="#collapseFour"> Next </button>
</div>
</div>
</div>
</div>
I recreated it in JSFiddle so you can see what I'm talking about and play with it.
Fiddle HERE
You can hide the divs you want for the first time on ready function using hide() method, e.g :
$('#panel2, #panel3').hide();
After that you should add an identifier id to every button next then attach a click event to it to control your accordion like you want on every click.
$('body').on('click', '#btn-next-id', function(){
//Here show hide divs you want
})
Hope this helps.
Snippet
$(function(){
//Hide other steps for the first time
$('#panel2, #panel3').hide();
$('body').on('click', '#next1', function(){
$('#panel2').show();
})
$('body').on('click', '#next2', function(){
$('#panel3').show();
})
})
/* Latest compiled and minified CSS included as External Resource*/
/* Optional theme */
#import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
body {
margin: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
I'm using the bootstrap accordion.
<div class="panel-group" id="accordion">
<div class="panel panel-default" id="panel1">
<div class="panel-heading">
<h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne"> 1. CHOOSE YOUR INDUSTRY </a> </h4>
</div>
<div id="collapseOne" class="panel-collapse collapse">
<div class="panel-body">
Testing 1
<button id="next1" type="button" class="btn btn-success" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo"> Next </button>
</div>
</div>
</div>
<div class="panel panel-default" id="panel2">
<div class="panel-heading">
<h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo"> 2. STANDARD FEATURES </a> </h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse">
<div class="panel-body">
Testing 2
<button id="next2" type="button" class="btn btn-success" data-toggle="collapse" data-parent="#accordion" href="#collapseThree"> Next </button>
</div>
</div>
</div>
<div class="panel panel-default" id="panel3">
<div class="panel-heading">
<h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapseThree"> 3. REAL ESTATE FEATURES </a> </h4>
</div>
<div id="collapseThree" class="panel-collapse collapse">
<div class="panel-body">
Testing 3
<button id="next3" type="button" class="btn btn-success" data-toggle="collapse" data-parent="#accordion" href="#collapseFour"> Next </button>
</div>
</div>
</div>
</div>
I'm not sure if this is exactly what you're looking for but how about simply removing the anchor element from step 2 and step 3's headings so a user can't click them to open them? Updated fiddle here: https://jsfiddle.net/DTcHh/15338/
<div class="panel-group" id="accordion">
<div class="panel panel-default" id="panel1">
<div class="panel-heading">
<h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne"> 1. CHOOSE YOUR INDUSTRY </a> </h4>
</div>
<div id="collapseOne" class="panel-collapse collapse">
<div class="panel-body">
Testing 1
<button type="button" class="btn btn-success" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo"> Next </button>
</div>
</div>
</div>
<div class="panel panel-default" id="panel2">
<div class="panel-heading">
<h4 class="panel-title"> 2. STANDARD FEATURES </h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse">
<div class="panel-body">
Testing 2
<button type="button" class="btn btn-success" data-toggle="collapse" data-parent="#accordion" href="#collapseThree"> Next </button>
</div>
</div>
</div>
<div class="panel panel-default" id="panel3">
<div class="panel-heading">
<h4 class="panel-title"> 3. REAL ESTATE FEATURES </h4>
</div>
<div id="collapseThree" class="panel-collapse collapse">
<div class="panel-body">
Testing 3
<button type="button" class="btn btn-success" data-toggle="collapse" data-parent="#accordion" href="#collapseFour"> Next </button>
</div>
</div>
</div>
</div>
You even add a "Previous" button to steps 2 and 3 so they can go back up the process? Updated fiddle here for this here: https://jsfiddle.net/DTcHh/15339/
So what I am looking at is:
When you click the header of the collapsable object, then nothing should happen
While $("#collapseOne").collapse('toggle'); or $("#collapseTwo").collapse('toggle'); should succeed
The Collabsable object:
<div class="accordion" id="accordion2">
<div class="accordion-group mzti-transparent-border" id="id-group-1">
<div id="id-header-1" class="accordion-heading mzti-bg-image-1">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
</div>
</a>
</div>
<div id="collapseOne" class="accordion-body collapse in">
<div class="accordion-inner">
</div>
</div>
</div>
<div class="accordion-group hide mzti-transparent-border mzti-height" id="id-group-2">
<div id="id-header-2" class="accordion-heading width-100 mzti-bg-image-2 margin-top-22px ">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">
</a>
</div>
<div id="collapseTwo" class="accordion-body collapse">
<div class="accordion-inner">
</div>
</div>
</div>
</div>
Remove the data-toggle="collapse" on the <a class="accordion-toggle"... elements