I am aware there are similar posts to this one, but I could not find an answer.
I have a bit of a custom layout, but I want to try and add the accordion effect however I cannot seem to figure out why, but for some reason everything works perfectly except that they do not close automatically once another one is clicked.
Here is my Accordion code:
<aside class="col-lg-4">
<div class="list-group">
<ul class="product-sorting">
<div id="accordion" role="tablist" aria-multiselectable="true" class="panel panel-group">
<li>All Products</li>
<li>
<a data-group="IQF" class="list-group-item" data-toggle="collapse" data-parent="#accordion" href="#collapse1" aria-expanded="false" aria-controls="collapse1">IQF Fruits (Individually Quick Frozen)
</a>
<div id="collapse1" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading1">
<div class="panel-body">
<p>Juice that is directly squeezed from a fruit/ vegetable. 100% juice contains no added sugar or preservatives.</p>
</div>
</div>
</li>
<li>
<a data-group="Fruit-Concentrate" class="list-group-item" data-toggle="collapse" data-parent="#accordion" href="#collapse2" aria-expanded="false" aria-controls="collapse2">
Fruit Juice Concentrate
</a>
<div id="collapse2" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading2">
<div class="panel-body">
<p>Juice that is directly squeezed from a fruit/ vegetable. 100% juice contains no added sugar or preservatives.</p>
</div>
</div>
</li>
<li>
<a data-group="Puree-pulp" class="list-group-item" data-toggle="collapse" data-parent="#accordion" href="#collapse3" aria-expanded="false" aria-controls="collapse3">
Fruit Puree/ Pulp
</a>
<div id="collapse3" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading3">
<div class="panel-body">
<p>Juice that is directly squeezed from a fruit/ vegetable. 100% juice contains no added sugar or preservatives.</p>
</div>
</div>
</li>
<li>
<a data-group="Puree-Concentrate" class="list-group-item" data-toggle="collapse" data-parent="#accordion" href="#collapse4" aria-expanded="false" aria-controls="collapse4">
Fruit Puree Concentrate
</a>
<div id="collapse4" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading4">
<div class="panel-body">
<p>Juice that is directly squeezed from a fruit/ vegetable. 100% juice contains no added sugar or preservatives.</p>
</div>
</div>
</li>
<li>
<a data-group="NFC" class="list-group-item" data-toggle="collapse" data-parent="#accordion" href="#collapse5" aria-expanded="false" aria-controls="collapse5">
NFC
</a>
<div id="collapse5" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading5">
<div class="panel-body">
<p>Juice that is directly squeezed from a fruit/ vegetable. 100% juice contains no added sugar or preservatives.</p>
</div>
</div>
</li>
<li>
<a data-group="Organic" class="list-group-item" data-toggle="collapse" data-parent="#accordion" href="#collapse6" aria-expanded="false" aria-controls="collapse6">
Organic
</a>
<div id="collapse6" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading6">
<div class="panel-body">
<p>Juice that is directly squeezed from a fruit/ vegetable. 100% juice contains no added sugar or preservatives.</p>
</div>
</div>
</li>
<li>
<a data-group="Dried" class="list-group-item" data-toggle="collapse" data-parent="#accordion" href="#collapse7" aria-expanded="false" aria-controls="collapse7">Dried Fruit/ Sweetened Dried Fruit
</a>
<div id="collapse7" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading7">
<div class="panel-body">
<p>Juice that is directly squeezed from a fruit/ vegetable. 100% juice contains no added sugar or preservatives.</p>
</div>
</div>
</li>
</div>
</ul>
</div>
</aside>
This is what is looks like:
The text "Juice that is directly squeezed from a fruit/ vegetable. 100% juice contains no added sugar or preservatives." is just dummy text it's the same for all the panels so do not let that confuse you.
Use <div class="accordion-group">
and assign data-parent="#parentdivid" to each of the accordion.
Example Snippet:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<h3>ACCORDION COLLAPSE</h3>
<div class="accordion" id="myAccordion">
<div class="panel">
<button type="button" class="btn btn-danger" data-toggle="collapse" data-target="#collapsible-1" data-parent="#myAccordion">Question 1?</button>
<div id="collapsible-1" class="collapse">
..
</div>
</div>
<div class="panel">
<button type="button" class="btn btn-danger" data-toggle="collapse" data-target="#collapsible-2" data-parent="#myAccordion">Question 2?</button>
<div id="collapsible-2" class="collapse">
..
</div>
</div>
<div class="panel">
<button type="button" class="btn btn-danger" data-toggle="collapse" data-target="#collapsible-3" data-parent="#myAccordion">Question 3?</button>
<div id="collapsible-3" class="collapse">
...
</div>
</div>
</div>
Related
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?
I have a accordion which is working absolutely fine but what I need is to open only one tab at a time, means when one tab is opened then another tab should be closed.
Currently you can see that we can open all the tabs by clicking on tab links.
Code here
<div id="accordion" class="checkout">
<div class="panel checkout-step">
<div class="head" role="tab" id="headingOne">
<img src="{{ asset('bundles/leaderboxfrontfront/img/1.png') }}" alt="">
<div id="bubble">
<h1><a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" > MON PROJET</a></h1>
</div>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
<div class="form-zone">
<div class="content">
Some content
</div>
</div>
</div>
</div>
<div class="panel checkout-step">
<div class="head" role="tab" id="headingTwo">
<img src="{{ asset('bundles/leaderboxfrontfront/img/3.png') }}" alt="">
<div id="bubble">
<h1><a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" > je choisis mon centre</a></h1>
</div>
</div>
<div id="collapseTwo" class="panel-collapse collapse">
<div class="form-zone">
<div class="content">
Some content
</div>
</div>
</div>
</div>
I have created two bootstrap accordions, one below the other. I did not like the way that the panels were awkwardly shifting locations when I had them all as one accordion, so I created two separate accordions. In doing so, each accordion works the way I would like: only one panel-body can be open at a time per accordion, but I would like to only allow one panel-body to be open..
To better explain what I mean...
Currently, you can have one panel-body opened in both the top and bottom row. I want you just to be able to have one opened at a time.
Is this possible to do?
Here is an example of what I have made
https://codepen.io/aahmed2/pen/yOQvVz
Here is my code.
<div class="row">
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-default col-md-4">
<div class="panel-heading bites-stings" role="tab" id="headingSeven">
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
<h2>Bites and Stings</h2>
</a>
</div>
<div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
<div class="panel-body">
<h4>Mosquitoes</h4>
<h4>Ticks</h4>
<h4>Bees and Wasps</h4>
<h4>Animal Bites</h4>
</div>
</div>
</div>
<div class="panel panel-default col-md-4">
<div class="panel-heading pet-health" role="tab" id="headingTwo">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
<h2>Pet Health and Safety</h2>
</a>
</div>
<div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
<div class="panel-body">
<h4>Pet Allergies</h4>
<h4>Toxic Plants</h4>
<h4>Pet and Wildlife Encounters</h4>
</div>
</div>
</div>
<div class="panel panel-default col-md-4">
<div class="panel-heading livestock-health" role="tab" id="headingThree">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
<h2>Livestock Health and Safety</h2>
</a>
</div>
<div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
<div class="panel-body">
<h4>This is a Topic</h4>
<h4>Topic 2</h4>
<h4>Another Topic</h4>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="panel-group" id="accordion2" role="tablist" aria-multiselectable="true">
<div class="panel panel-default col-md-4">
<div class="panel-heading zoonotic" role="tab" id="headingFour">
<a role="button" data-toggle="collapse" data-parent="#accordion2" href="#collapseFour" aria-expanded="true" aria-controls="collapseFour">
<h2>Zoonotic Diseases</h2>
</a>
</div>
<div id="collapseFour" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingFour">
<div class="panel-body">
<h4>Bacterial</h4>
<h4>Fungal</h4>
<h4>Parasitic</h4>
<h4>Prionotic</h4>
<h4>Rickettsial</h4>
<h4>Spirochetes</h4>
<h4>Viral</h4>
</div>
</div>
</div>
<div class="panel panel-default col-md-4">
<div class="panel-heading allergies" role="tab" id="headingFive">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion2" href="#collapseFive" aria-expanded="false" aria-controls="collapseFive">
<h2>Allergies</h2>
</a>
</div>
<div id="collapseFive" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingFive">
<div class="panel-body">
<h4>Animal Allergies</h4>
<h4>Environmental Allergies</h4>
</div>
</div>
</div>
<div class="panel panel-default col-md-4">
<div class="panel-heading environment-health" role="tab" id="headingSix">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion2" href="#collapseSix" aria-expanded="false" aria-controls="collapseSix">
<h2>Environmental Health</h2>
</a>
</div>
<div id="collapseSix" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingSix">
<div class="panel-body">
<h4>This is a Topic</h4>
<h4>Topic 2</h4>
<h4>Another Topic</h4>
</div>
</div>
</div>
</div><!--/collapse-->
</div>
</div>
To have multiple accordions but only one open at the same time you just need to combine the data-parent. So I have made a codepen for you to see it working.
I just changed all data-parent to data-parent="#accordion,#accordion2"
<div class="row">
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-default col-md-4">
<div class="panel-heading bites-stings" role="tab" id="headingSeven">
<a role="button" data-toggle="collapse" data-parent="#accordion,#accordion2" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
<h2>Bites and Stings</h2>
</a>
</div>
<div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
<div class="panel-body">
<h4>Mosquitoes</h4>
<h4>Ticks</h4>
<h4>Bees and Wasps</h4>
<h4>Animal Bites</h4>
</div>
</div>
</div>
<div class="panel panel-default col-md-4">
<div class="panel-heading pet-health" role="tab" id="headingTwo">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion,#accordion2" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
<h2>Pet Health and Safety</h2>
</a>
</div>
<div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
<div class="panel-body">
<h4>Pet Allergies</h4>
<h4>Toxic Plants</h4>
<h4>Pet and Wildlife Encounters</h4>
</div>
</div>
</div>
<div class="panel panel-default col-md-4">
<div class="panel-heading livestock-health" role="tab" id="headingThree">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion,#accordion2" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
<h2>Livestock Health and Safety</h2>
</a>
</div>
<div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
<div class="panel-body">
<h4>This is a Topic</h4>
<h4>Topic 2</h4>
<h4>Another Topic</h4>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="panel-group" id="accordion2" role="tablist" aria-multiselectable="true">
<div class="panel panel-default col-md-4">
<div class="panel-heading zoonotic" role="tab" id="headingFour">
<a role="button" data-toggle="collapse" data-parent="#accordion,#accordion2" href="#collapseFour" aria-expanded="true" aria-controls="collapseFour">
<h2>Zoonotic Diseases</h2>
</a>
</div>
<div id="collapseFour" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingFour">
<div class="panel-body">
<h4>Bacterial</h4>
<h4>Fungal</h4>
<h4>Parasitic</h4>
<h4>Prionotic</h4>
<h4>Rickettsial</h4>
<h4>Spirochetes</h4>
<h4>Viral</h4>
</div>
</div>
</div>
<div class="panel panel-default col-md-4">
<div class="panel-heading allergies" role="tab" id="headingFive">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion,#accordion2" href="#collapseFive" aria-expanded="false" aria-controls="collapseFive">
<h2>Allergies</h2>
</a>
</div>
<div id="collapseFive" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingFive">
<div class="panel-body">
<h4>Animal Allergies</h4>
<h4>Environmental Allergies</h4>
</div>
</div>
</div>
<div class="panel panel-default col-md-4">
<div class="panel-heading environment-health" role="tab" id="headingSix">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion,#accordion2" href="#collapseSix" aria-expanded="false" aria-controls="collapseSix">
<h2>Environmental Health</h2>
</a>
</div>
<div id="collapseSix" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingSix">
<div class="panel-body">
<h4>This is a Topic</h4>
<h4>Topic 2</h4>
<h4>Another Topic</h4>
</div>
</div>
</div>
</div><!--/collapse-->
</div>
http://jsfiddle.net/dpGsZ/2/
<div class="accordion" id="accordion2">
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
Collapsible Group Item #1
</a>
</div>
<div id="collapseOne" class="accordion-body collapse in">
<div class="accordion-inner">
...
</div>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">
Collapsible Group Item #2
</a>
</div>
<div id="collapseTwo" class="accordion-body collapse">
<div class="accordion-inner">
...
</div>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseThree">
Collapsible Group Item #3
</a>
</div>
<div id="collapseThree" class="accordion-body collapse">
<div class="accordion-inner">
...
</div>
</div>
</div>
</div>
it's just a copy/pasted accordion from the Bootstrap docs.
According to http://getbootstrap.com/javascript/ I shouldn't need to do anything else to get that accordion to work. But it doesn't.
What am I doing wrong?
Added Jquery 1.9.1, Bootstrap 3 CSS and Bootstrap 3 JS. Now your accordion works. Check it out at jsFiddle
Next time, do read the documentation clearly and carefully. For example for BS3, on page http://getbootstrap.com/getting-started/, thereis a subsection called what's included and that has something written in a red-box.
Update: jQuery is required for bootstrap to work. Please check the starter template
You need to include the jQuery library using either the Google CDN (script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">) or downloading it yourself from the jQuery website.
FYI, in Bootstrap 3.0.0 final the accordion classes have been changed to "panel", "panel-group", "panel-heading", and "panel-toggle".
http://jsfiddle.net/dpGsZ/3/
<div>
<div class="panel-group" id="accordion2">
<div class="panel">
<div class="panel-heading">
<a class="panel-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
Collapsible Group Item #1
</a>
</div>
<div id="collapseOne" class="panel-body collapse in">
<div class="panel-inner">
This is collapsible one
</div>
</div>
</div>
<div class="panel">
<div class="panel-heading">
<a class="panel-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">
Collapsible Group Item #2
</a>
</div>
<div id="collapseTwo" class="panel-body collapse">
<div class="panel-inner">
This is collapsible two
</div>
</div>
</div>
<div class="panel">
<div class="panel-heading">
<a class="panel-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseThree">
Collapsible Group Item #3
</a>
</div>
<div id="collapseThree" class="panel-body collapse">
<div class="panel-inner">
This is collapsible three
</div>
</div>
</div>
</div>
At first I would like to say thank you to the TwitterBootsrap team for what they are producing but the documentation need much more work.
I am having the code of the site example at my site:
<div class="accordion" id="accordion2">
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">Collapsible Group Item #1</a>
</div>
<div id="collapseOne" class="accordion-body collapse in">
<div class="accordion-inner">
Sentence 1
</div>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">Collapsible Group Item #2</a>
</div>
<div id="collapseTwo" class="accordion-body collapse">
<div class="accordion-inner">
Sentence2
</div>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseThree">Collapsible Group Item #3</a>
</div>
<div id="collapseThree" class="accordion-body collapse">
<div class="accordion-inner">
Sentence3
</div>
</div>
</div>
</div>
The problem is that each row of the accordion opens and closes only once and then the accordion becomes useless. What am I doing wrong?
I had this same problem. Updated jQuery to latest version (1.9.1) fixed it.