Accordions Shortcodes

										
<h4>Default With Icon</h4>
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading titel_panel">
<h4 class="panel-title">
<a class="accordion-toggle accrodin_2 border" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
<i class="fa fa-minus-circle"></i>
</a>
<a class="accordion-toggle right" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
Who We Are
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">
There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined.If you are going to use a passage of Lorem Ipsum
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading titel_panel">
<h4 class="panel-title">
<a class="accordion-toggle accrdion_3 border" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
<i class="fa fa-plus-circle"></i>
</a>
<a class="accordion-toggle right" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">Our Mission
</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse">
<div class="panel-body">
There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined.If you are going to use a passage of Lorem Ipsum
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading titel_panel">
<h4 class="panel-title">
<a class="accordion-toggle accrdion_3 border" data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
<i class="fa fa-plus-circle"></i>
</a>
<a class="accordion-toggle right" data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
What We Do
</a>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse">
<div class="panel-body">
There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined.If you are going to use a passage of Lorem Ipsum
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading titel_panel">
<h4 class="panel-title">
<a class="accordion-toggle accrdion_3 border" data-toggle="collapse" data-parent="#accordion" href="#collapseFour">
<i class="fa fa-plus-circle"></i>
</a>
<a class="accordion-toggle right" data-toggle="collapse" data-parent="#accordion" href="#collapseFour">
Our Clients
</a>
</h4>
</div>
<div id="collapseFour" class="panel-collapse collapse">
<div class="panel-body">
There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined.If you are going to use a passage of Lorem Ipsum
</div>
</div>
</div>
</div>

<h4>Default</h4>
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapse1One">
Accordion Titel  Fancy 1
</a>
</h4>
</div>
<div id="collapse1One" class="accordion-body collapse in">
<div class="panel-body">
<p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. Praesent id enim sit amet odio vulputate eleifend in in tortor. It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. Praesent id enim sit amet odio vulputate eleifend in in tortor. Donec tellus massa.</p>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapse1Two">
Accordion Titel  Fancy 2
</a>
</h4>
</div>
<div id="collapse1Two" class="accordion-body collapse">
<div class="panel-body">
<p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</p>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapse1Three">
Accordion Titel  Fancy 3
</a>
</h4>
</div>
<div id="collapse1Three" class="accordion-body collapse">
<div class="panel-body">
<p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</p>
</div>
</div>
</div>
</div>

<h4>Colors</h4>
<div class="row">
<div class="col-md-4">
<div class="panel-group panel-group-tertiary" id="accordion2Tertiary">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2Tertiary" href="#collapse2TertiaryOne">
Accordion Titel  Fancy 1
</a>
</h4>
</div>
<div id="collapse2TertiaryOne" class="accordion-body collapse in">
<div class="panel-body">
<p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</p>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2Tertiary" href="#collapse2TertiaryTwo">
Accordion Titel  Fancy 2
</a>
</h4>
</div>
<div id="collapse2TertiaryTwo" class="accordion-body collapse">
<div class="panel-body">
<p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</p>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2Tertiary" href="#collapse2TertiaryThree">
Accordion Titel  Fancy 3
</a>
</h4>
</div>
<div id="collapse2TertiaryThree" class="accordion-body collapse">
<div class="panel-body">
<p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</p>
</div>
</div>
</div>
</div>
</div>

<div class="col-md-6">
<h4>Large</h4>
<div class="panel-group panel-group-lg" id="accordion5">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion5" href="#collapse5One">
Accordion Titel  Fancy 1
</a>
</h4>
</div>
<div id="collapse5One" class="accordion-body collapse in">
<div class="panel-body">
<p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</p>
<p>The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. </p>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion5" href="#collapse5Two">
Accordion Titel  Fancy 2
</a>
</h4>
</div>
<div id="collapse5Two" class="accordion-body collapse">
<div class="panel-body">
<p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</p>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion5" href="#collapse5Three">
Accordion Titel  Fancy 3
</a>
</h4>
</div>
<div id="collapse5Three" class="accordion-body collapse">
<div class="panel-body">
<p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</p>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-3">
<h4>Small</h4>
<div class="panel-group panel-group-sm" id="accordion3">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion3" href="#collapse3One">
Accordion Titel  Fancy 1
</a>
</h4>
</div>
<div id="collapse3One" class="accordion-body collapse in">
<div class="panel-body">
<p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. Praesent id enim sit amet odio vulputate eleifend in in tortor. Donec tellus massa, tristique sit amet condim vel, facilisis quis sapien.</p>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion3" href="#collapse3Two">
Accordion Titel  Fancy 2
</a>
</h4>
</div>
<div id="collapse3Two" class="accordion-body collapse">
<div class="panel-body">
<p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</p>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion3" href="#collapse3Three">
Accordion Titel  Fancy 3
</a>
</h4>
</div>
<div id="collapse3Three" class="accordion-body collapse">
<div class="panel-body">
<p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</p>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-3">
<h4>Default</h4>
<div class="panel-group" id="accordion4">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion4" href="#collapse4One">
Accordion Titel  Fancy 1
</a>
</h4>
</div>
<div id="collapse4One" class="accordion-body collapse in">
<div class="panel-body">
<p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. Praesent id enim sit amet odio vulputate eleifend in in tortor. Donec tellus massa, tristique sit amet condim vel, facilisis quis sapien.</p>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion4" href="#collapse4Two">
Accordion Titel  Fancy 2
</a>
</h4>
</div>
<div id="collapse4Two" class="accordion-body collapse">
<div class="panel-body">
<p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</p>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion4" href="#collapse4Three">
Accordion Titel  Fancy 3
</a>
</h4>
</div>
<div id="collapse4Three" class="accordion-body collapse">
<div class="panel-body">
<p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</p>
</div>
</div>
</div>
</div>
</div>

										
									

										
.panel-group .panel-heading a {
color: #0088cc;
}
html .panel-group.panel-group-primary .panel-heading {
background-color: #373A47 !important;
}
html .panel-group.panel-group-primary .panel-heading a {
color: #ffffff;
}
html .panel-group.panel-group-secondary .panel-heading {
background-color: #e36159 !important;
}
html .panel-group.panel-group-secondary .panel-heading a {
color: #ffffff;
}
html .panel-group.panel-group-tertiary .panel-heading {
background-color: #24CCD7 !important;
}
html .panel-group.panel-group-tertiary .panel-heading a {
color: #ffffff;
}
html .panel-group.panel-group-quaternary .panel-heading {
background-color: #383f48 !important;
}
html .panel-group.panel-group-quaternary .panel-heading a {
color: #ffffff;
}
html .panel-group.panel-group-dark .panel-heading {
background-color: #2e353e !important;
}
html .panel-group.panel-group-dark .panel-heading a {
color: #ffffff;
}
html .panel-group.panel-group-light .panel-heading {
background-color: #ffffff !important;
}
html .panel-group.panel-group-light .panel-heading a {
color: #777777;
}
										
									

										
$('.collapse').on('shown.bs.collapse', function(){
$(this).parent().find(".fa-plus-circle").removeClass("fa-plus-circle").addClass("fa-minus-circle");
}).on('hidden.bs.collapse', function(){
$(this).parent().find(".fa-minus-circle").removeClass("fa-minus-circle").addClass("fa-plus-circle");
});