Hello i am struggle with something in accordeons here is my code and illuminate me please guys!!
<div id="tg-accordion" class="tg-accordion">
<div class="tg-panel">
<h4 class="active">Why is accreditation important</h4>
<div class="tg-panelcontent" style="display: block;">
<div class="tg-jobdescription">
<div class="tg-description">
<p>description</p>
</div>
</div>
</div>
</div>
<div class="tg-panel">
<h4 style="margin-bottom: 10px!important;">European Regulation 765/ 2008</h4>
<div class="tg-panelcontent" style="display: none;">
<div class="tg-jobdescription">
<div class="tg-description" style="margin-bottom: 10px!important;">
<p>description</p>
</div>
</div>
</div>
<div class="tg-panel">
<h4>Recognition of certifications. How accreditation provides recognition</h4>
<div class="tg-panelcontent" style="display: none;">
<div class="tg-jobdescription">
<div class="tg-description">
<p>description</p>
</div>
</div>
</div>
</div>
This is html and i have some jquery i want when i click second time to close that accordeon tab and when it`s open to have on tg-panel background blue.
And here is my Jquery:
$(function() {
$('.tg-panelcontent').hide();
// $('#tg-accordion h4:first').addClass('active').next().slideDown('slow');
$('#tg-accordion h4').click(function() {
if($(this).next().is(':hidden')) {
$('#tg-accordion h4').removeClass('active').next().slideUp('slow');
$(this).toggleClass('active').next().slideDown('slow');
}
});
});
If you've already included Bootstrap's scripts, there are no need for additional scripts in order to do the behaviour you want. Check out this example, which is available at Bootstrap's official page.
With this, the data-toggle attribute at the <a> or <button> tags indicates that the element it's a "collapse toggler" and the href/data-target points to an element ID which is the container to be collapsed/expanded. Simple :)
<p>
<a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
Link with href
</a>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
Button with data-target
</button>
</p>
<div class="collapse" id="collapseExample">
<div class="card card-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
</div>
</div>
You don't need anything. Only be sure that the link to CSS is on the top of the page and the Scripts and the end of the page. It should work fine.
<!-- CSS needed at the beginning of the page -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<div class="accordion" id="accordionExample">
<div class="card">
<div class="card-header" id="headingOne">
<h5 class="mb-0">
<button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Why is accreditation important
</button>
</h5>
</div>
<div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
<div class="card-body">
description
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingTwo">
<h5 class="mb-0">
<button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
European Regulation 765/ 2008
</button>
</h5>
</div>
<div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
<div class="card-body">
description
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingThree">
<h5 class="mb-0">
<button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
Recognition of certifications. How accreditation provides recognition
</button>
</h5>
</div>
<div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
<div class="card-body">
description
</div>
</div>
</div>
</div>
<!-- Scripts needed at the end of the page -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
You can simple add the data-toggle="collapse" on the header's together with the data-target="#idOfYourElement" to trigger the collapse. And replace the display:none with the collapse class on the target element:
Working exemple:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<div id="tg-accordion" class="tg-accordion">
<div class="tg-panel">
<h4 class="active" data-toggle="collapse" data-target="#targetOne">Why is accreditation important</h4>
<div class="tg-panelcontent collapse" id="targetOne">
<div class="tg-jobdescription">
<div class="tg-description">
<p>description</p>
</div>
</div>
</div>
</div>
<div class="tg-panel">
<h4 data-toggle="collapse" data-target="#targetTwo" style="margin-bottom: 10px!important;" >European Regulation 765/ 2008</h4>
<div class="tg-panelcontent collapse" id="targetTwo">
<div class="tg-jobdescription">
<div class="tg-description" style="margin-bottom: 10px!important;">
<p>description</p>
</div>
</div>
</div>
<div class="tg-panel">
<h4 data-toggle="collapse" data-target="#targetThree">Recognition of certifications. How accreditation provides recognition</h4>
<div class="tg-panelcontent collapse" id="targetThree">
<div class="tg-jobdescription">
<div class="tg-description">
<p>description</p>
</div>
</div>
</div>
</div>
Related
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">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div class="accordion" id="accordionExample">
<div class="card">
<div class="card-header">
<div class="card-header-title" style="border-radius:0px;cursor:pointer;" id="headingOne">
<i class="pe-7s-angle-up-circle" style="color:#3d68e0;font-size:16px;" data-toggle="collapse" data-target="#collapseOne"></i>
<font data-toggle="collapse" data-target="#collapseOne">Header</font>
</div>
</div>
<div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
<div class="card-body">
123
</div>
</div>
</div>
<br>
<div class="card">
<div class="card-header">
<div class="card-header-title" style="border-radius:0px;cursor:pointer;" id="headingTwo">
<i class="pe-7s-angle-up-circle" style="color:#3d68e0;font-size:16px;" data-toggle="collapse" data-target="#collapseTwo"></i>
<font data-toggle="collapse" data-target="#collapseTwo">Detail</font>
</div>
</div>
<div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
<div class="card-body">
123
</div>
</div>
</div>
<br>
<div class="card">
<div class="card-header">
<div class="card-header-title" style="border-radius:0px;cursor:pointer;" id="headingThree">
<i class="pe-7s-angle-up-circle" data-toggle="collapse" data-target="#collapseThree"></i>
<font data-toggle="collapse" data-target="#collapseThree">Vendor Price Detail</font>
</div>
</div>
<div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
<div class="card-body">
123
</div>
</div>
</div>
<br>
<div class="card">
<div class="card-header">
<div class="card-header-title" style="border-radius:0px;cursor:pointer;" id="headingFour">
<i class="pe-7s-angle-up-circle" data-toggle="collapse" data-target="#collapseFour"></i>
<font data-toggle="collapse" data-target="#collapseThree">Debtor Price Detail</font>
</div>
</div>
<div id="collapseFour" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
<div class="card-body">
123
</div>
</div>
</div>
<br />
<div class="card">
<div class="card-header">
<div class="card-header-title" style="border-radius:0px;cursor:pointer;" id="headingFive">
<i class="pe-7s-angle-up-circle" data-toggle="collapse" data-target="#collapseFive"></i>
<font data-toggle="collapse" data-target="#collapseThree">Tesco</font>
</div>
</div>
<div id="collapseFive" class="collapse" aria-labelledby="headingFive" data-parent="#accordionExample">
<div class="card-body">
123
</div>
</div>
</div>
</div>
The Code i Copy from link: https://www.tutorialrepublic.com/codelab.php?topic=bootstrap&file=accordion
I just change the button to font
My Problem is:
The code should be toggle but I click 1 more time to close the card body (not working). Only press other collapse then its close.
How to solve this.
The issue you are facing is because <font> have display CSS attribute value inline by default, I would suggest to not using it since its obsolete, to fix the issue I replaced <font> tag with <div>
Note: I also fixed the the collapse attribute for the some of the accordion elements and moved the inline CSS to CSS classes.
.card-header-title {
border-radius:0px;
cursor:pointer;
}
.pe-7s-angle-up-circle {
color:#3d68e0;
font-size:16px
}
font {
display: block
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div class="accordion" id="accordionExample">
<div class="card">
<div class="card-header">
<div class="card-header-title" id="headingOne">
<i class="pe-7s-angle-up-circle" data-toggle="collapse" data-target="#collapseOne"></i>
<div data-toggle="collapse" data-target="#collapseOne">Header</div>
</div>
</div>
<div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
<div class="card-body">
123
</div>
</div>
</div>
<br>
<div class="card">
<div class="card-header">
<div class="card-header-title" id="headingTwo">
<i class="pe-7s-angle-up-circle" data-toggle="collapse" data-target="#collapseTwo"></i>
<div data-toggle="collapse" data-target="#collapseTwo">Detail</div>
</div>
</div>
<div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
<div class="card-body">
123
</div>
</div>
</div>
<br>
<div class="card">
<div class="card-header">
<div class="card-header-title" id="headingThree">
<i class="pe-7s-angle-up-circle" data-toggle="collapse" data-target="#collapseThree"></i>
<div data-toggle="collapse" data-target="#collapseThree">Vendor Price Detail</div>
</div>
</div>
<div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
<div class="card-body">
123
</div>
</div>
</div>
<br>
<div class="card">
<div class="card-header">
<div class="card-header-title" id="headingFour">
<i class="pe-7s-angle-up-circle" data-toggle="collapse" data-target="#collapseFour"></i>
<div data-toggle="collapse" data-target="#collapseFour">Debtor Price Detail</div>
</div>
</div>
<div id="collapseFour" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
<div class="card-body">
123
</div>
</div>
</div>
<br />
<div class="card">
<div class="card-header">
<div class="card-header-title" id="headingFive">
<i class="pe-7s-angle-up-circle" data-toggle="collapse" data-target="#collapseFive"></i>
<div data-toggle="collapse" data-target="#collapseFive">Tesco</div>
</div>
</div>
<div id="collapseFive" class="collapse" aria-labelledby="headingFive" data-parent="#accordionExample">
<div class="card-body">
123
</div>
</div>
</div>
</div>
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')!
I'm kind of new to bootstrap so I'm not sure how I'd go about this.
I have a simple bootstrap accordion like in this snippet. It is split into multiple accordions because I want them to be able to expand and collapse independently from each other. (as in can expand and show all items or none, not just one expanded and the others collapsed)
I want to disable the expanding and collapsing on desktop and make sure each item is shown. But then on mobile I only want to have the first item shown and the others collapsed by default.
Any suggestions on how I could achieve this would be greatly appreciated.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<div id="accordion">
<div class="card">
<div class="card-header" id="heading1">
<button class="btn btn-default" data-toggle="collapse" data-target="#body1" aria-expanded="true" aria-controls="body1">
//heading
</button>
</div>
<div id="body1" class="collapse show" aria-labelledby="heading1" data-parent="#accordion">
<div class="product card-body">
//content
</div>
</div>
</div>
</div>
<div id="accordion">
<div class="card">
<div class="card-header" id="heading2">
<button class="btn btn-default" data-toggle="collapse" data-target="#body2" aria-expanded="true" aria-controls="body2">
//heading
</button>
</div>
<div id="body2" class="collapse show" aria-labelledby="heading2" data-parent="#accordion">
<div class="product card-body">
//content
</div>
</div>
</div>
</div>
<div id="accordion">
<div class="card">
<div class="card-header" id="heading3">
<button class="btn btn-default" data-toggle="collapse" data-target="#body3" aria-expanded="true" aria-controls="body3">
//heading
</button>
</div>
<div id="body3" class="collapse show" aria-labelledby="heading3" data-parent="#accordion">
<div class="product card-body">
//content
</div>
</div>
</div>
</div>
I have found a solution for this, please check below
CSS for desktop
.modified-accordion .card-header{ position: relative;}
.modified-accordion .card-header:after{ content: ''; position: absolute; width: 100%;
height: 100%; left: 0; top: 0;}
.modified-accordion .collapse:not(.show){ display: block;}
CSS for Mobile
#media (max-width: 767px) {
.modified-accordion .collapse:not(.show){ display: none;}
.modified-accordion .card-header:after{ display: none;}
}
HTML structure
<div class="accordion modified-accordion">
<div class="card">
<div class="card-header" id="headingOne">
<h2 class="mb-0">
<button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">Collapsible Group Item #1</button>
</h2>
</div>
<div id="collapseOne" class="collapse show" aria-labelledby="headingOne">
<div class="card-body">Contect-1</div>
</div>
</div>
</div>
<div class="accordion modified-accordion">
<div class="card">
<div class="card-header" id="headingTwo">
<h2 class="mb-0">
<button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">Collapsible Group Item #2</button>
</h2>
</div>
<div id="collapseTwo" class="collapse" aria-labelledby="headingTwo">
<div class="card-body">Content-2</div>
</div>
</div>
</div>
<div class="accordion modified-accordion">
<div class="card">
<div class="card-header" id="headingThree">
<h2 class="mb-0">
<button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree"> Collapsible Group Item #3</button>
</h2>
</div>
<div id="collapseThree" class="collapse" aria-labelledby="headingThree">
<div class="card-body">Content-3</div>
</div>
</div>
</div>
I have developed a modal containing three collapsible divs. When i dismiss the modal and open it again the active collapsible divs are still open. I'd rather want all open collapsibles to be closed except the div with "panel-collapse collapse in" class when the modal gets closed.
PS- I am using Bootstrap 3.
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 id="modal-title"> </h4>
</div>
<div class="modal-body">
<div class="panel-group" id="accordion">
<div class="panel panel-primary">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse1">Course Introduction
<span class="pull-right"><i id="icon0" class="fa fa-plus open" aria-hidden="true"></i></span>
</a>
</h4>
</div>
<div id="collapse1" class="panel-collapse collapse in">
<div class="panel-body">
<p> abc abc abc </p>
</div>
</div>
</div>
<div class="panel ">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse2">Description
<span class="pull-right"><i id="icon" class="fa fa-plus" aria-hidden="true"></i></span></a>
</h4>
</div>
<div id="collapse2" class="panel-collapse collapse">
<div class="panel-body">
<p>Lorem ipsum dolor sit amet, </p>
</div>
</div>
</div>
<div class="panel">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse3">Goals
<span class="pull-right"><i id="icon" class="fa fa-plus" aria-hidden="true"></i></span></a>
</h4>
</div>
<div id="collapse3" class="panel-collapse collapse">
<div class="panel-body">
<p>Lorem ipsum dolor sit amet,</p>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
You have to toggle collapse to open of the panel, and collapse all collapsible component when hiding modal.
$('#myModal').on('hidden.bs.modal', function () {
$('.collapse').collapse('hide');
})
$('#myModal').on('shown.bs.modal', function () {
$('#collapse1').collapse('show');
})
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Bootstrap Demo</title>
</head>
<body>
<button id="modalButtton" type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 id="modal-title"> </h4>
</div>
<div class="modal-body">
<div class="panel-group" id="accordion">
<div class="panel panel-primary">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse1">Course Introduction
<span class="pull-right"><i id="icon0" class="fa fa-plus open" aria-hidden="true"></i></span>
</a>
</h4>
</div>
<div id="collapse1" class="panel-collapse collapse in">
<div class="panel-body">
<p> abc abc abc </p>
</div>
</div>
</div>
<div class="panel ">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse2">Description
<span class="pull-right"><i id="icon" class="fa fa-plus" aria-hidden="true"></i></span></a>
</h4>
</div>
<div id="collapse2" class="panel-collapse collapse">
<div class="panel-body">
<p>Lorem ipsum dolor sit amet, </p>
</div>
</div>
</div>
<div class="panel">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse3">Goals
<span class="pull-right"><i id="icon" class="fa fa-plus" aria-hidden="true"></i></span></a>
</h4>
</div>
<div id="collapse3" class="panel-collapse collapse">
<div class="panel-body">
<p>Lorem ipsum dolor sit amet,</p>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</body>
</html>
Did you see something in documentation of bootstrap? here: http://getbootstrap.com/javascript/#collapse-usage
you could implement some event of modal: http://getbootstrap.com/javascript/#modals-methods
something like:
$('#myModal').on('hidden.bs.modal', function (e) {
$('.collapse').collapse();
})