Bootstrap Accordions - Component Snippets
Here's a go-to place for Bootstrap accordion snippets that you can copy and paste directly into your project. With accordions, you can break up information into more digestible, bite-sized pieces. Copy and paste these snippets to make beautiful accordions with only a couple of lines of code.
Accordions Style 1
<div class="single-accordion">
<div class="accordion-style-one">
<div class="accordion" id="accordion">
<div class="card">
<div class="card-header" id="headingOne">
<a href="#collapseOne" data-bs-toggle="collapse" role="button" aria-expanded="true">Accordions title
here</a>
</div>
<div id="collapseOne" class="collapse show" data-bs-parent="#accordion">
<div class="card-body">
<p class="text">
Raw denim you probably haven’t heard of them jean
shorts Austin. Nesciunt tofu stumptown aliqua, retro
synth master cleanse. Mustache cliche tempor,
williamsburg carles vegan helvetica. Reprehenderit
butcher retro keffiyeh dreamcatcher synth. <br />
<br />
Cosby sweater eu banh mi, qui irure terry richardson
ex squid. Aliquip placeat salvia cillum iphone. Seitan
aliquip quis cardigan american apparel, butcher
voluptate nisi qui.
</p>
</div>
</div>
</div>
<!-- card -->
<div class="card">
<div class="card-header" id="headingTwo">
<a class="collapsed" href="#collapseTwo" data-bs-toggle="collapse" role="button"
aria-expanded="false">Accordions title here</a>
</div>
<div id="collapseTwo" class="collapse" data-bs-parent="#accordion">
<div class="card-body">
<p class="text">
Raw denim you probably haven’t heard of them jean
shorts Austin. Nesciunt tofu stumptown aliqua, retro
synth master cleanse. Mustache cliche tempor,
williamsburg carles vegan helvetica. Reprehenderit
butcher retro keffiyeh dreamcatcher synth. <br />
<br />
Cosby sweater eu banh mi, qui irure terry richardson
ex squid. Aliquip placeat salvia cillum iphone. Seitan
aliquip quis cardigan american apparel, butcher
voluptate nisi qui.
</p>
</div>
</div>
</div>
<!-- card -->
<div class="card">
<div class="card-header" id="headingThree">
<a class="collapsed" href="#collapseThree" data-bs-toggle="collapse" role="button"
aria-expanded="false">Accordions title here</a>
</div>
<div id="collapseThree" class="collapse" data-bs-parent="#accordion">
<div class="card-body">
<p class="text">
Raw denim you probably haven’t heard of them jean
shorts Austin. Nesciunt tofu stumptown aliqua, retro
synth master cleanse. Mustache cliche tempor,
williamsburg carles vegan helvetica. Reprehenderit
butcher retro keffiyeh dreamcatcher synth. <br />
<br />
Cosby sweater eu banh mi, qui irure terry richardson
ex squid. Aliquip placeat salvia cillum iphone. Seitan
aliquip quis cardigan american apparel, butcher
voluptate nisi qui.
</p>
</div>
</div>
</div>
<!-- card -->
<div class="card">
<div class="card-header" id="headingFour">
<a class="collapsed" href="#collapseFour" data-bs-toggle="collapse" role="button"
aria-expanded="false">Accordions title here</a>
</div>
<div id="collapseFour" class="collapse" data-bs-parent="#accordion">
<div class="card-body">
<p class="text">
Raw denim you probably haven’t heard of them jean
shorts Austin. Nesciunt tofu stumptown aliqua, retro
synth master cleanse. Mustache cliche tempor,
williamsburg carles vegan helvetica. Reprehenderit
butcher retro keffiyeh dreamcatcher synth. <br />
<br />
Cosby sweater eu banh mi, qui irure terry richardson
ex squid. Aliquip placeat salvia cillum iphone. Seitan
aliquip quis cardigan american apparel, butcher
voluptate nisi qui.
</p>
</div>
</div>
</div>
<!-- card -->
<div class="card">
<div class="card-header" id="headingFive">
<a class="collapsed" href="#collapseFive" data-bs-toggle="collapse" role="button"
aria-expanded="false">Accordions title here</a>
</div>
<div id="collapseFive" class="collapse" data-bs-parent="#accordion">
<div class="card-body">
<p class="text">
Raw denim you probably haven’t heard of them jean
shorts Austin. Nesciunt tofu stumptown aliqua, retro
synth master cleanse. Mustache cliche tempor,
williamsburg carles vegan helvetica. Reprehenderit
butcher retro keffiyeh dreamcatcher synth. <br />
<br />
Cosby sweater eu banh mi, qui irure terry richardson
ex squid. Aliquip placeat salvia cillum iphone. Seitan
aliquip quis cardigan american apparel, butcher
voluptate nisi qui.
</p>
</div>
</div>
</div>
<!-- card -->
</div>
</div>
<!-- card -->
</div>
<!-- accordion style one -->
/* accordion-style-one */
.accordion-style-one .accordion .card {
margin-top: 8px;
border: 1px solid var(--gray-4) !important;
border-radius: 4px;
}
.accordion-style-one .accordion .card .card-header {
padding: 0;
background: none;
}
.accordion-style-one .accordion .card .card-header a {
display: block;
font-size: 16px;
font-weight: 700;
line-height: 24px;
position: relative;
color: var(--primary);
-webkit-transition: all 0.3s ease-out 0s;
-moz-transition: all 0.3s ease-out 0s;
-ms-transition: all 0.3s ease-out 0s;
-o-transition: all 0.3s ease-out 0s;
transition: all 0.3s ease-out 0s;
border: 1px solid var(--primary);
margin: -1px;
border-radius: 4px;
padding: 13px 16px;
z-index: 5;
}
.accordion-style-one .accordion .card .card-header a::before {
position: absolute;
content: "\ea5e";
font-family: lineicons !important;
right: 16px;
top: 14px;
font-size: 16px;
-webkit-transition: all 0.3s ease-out 0s;
-moz-transition: all 0.3s ease-out 0s;
-ms-transition: all 0.3s ease-out 0s;
-o-transition: all 0.3s ease-out 0s;
transition: all 0.3s ease-out 0s;
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
}
.accordion-style-one .accordion .card .card-header a.collapsed {
color: var(--black);
border-color: var(--gray-4);
}
.accordion-style-one .accordion .card .card-header a.collapsed::before {
-webkit-transform: rotate(0);
-moz-transform: rotate(0);
-ms-transform: rotate(0);
-o-transform: rotate(0);
transform: rotate(0);
}
.accordion-style-one .accordion .card .card-body {
padding: 16px;
}
.accordion-style-one .accordion .card .card-body .text {
color: var(--dark-3);
}
Accordions Style 2
<div class="single-accordion">
<div class="accordion-style-two">
<div class="accordion" id="accordionTwo">
<div class="card">
<div class="card-header" id="headingSix">
<a href="#collapseSix" data-bs-toggle="collapse" role="button" aria-expanded="true">Accordions title
here</a>
</div>
<div id="collapseSix" class="collapse show" data-bs-parent="#accordionTwo">
<div class="card-body">
<p class="text">
Raw denim you probably haven’t heard of them jean
shorts Austin. Nesciunt tofu stumptown aliqua, retro
synth master cleanse. Mustache cliche tempor,
williamsburg carles vegan helvetica. Reprehenderit
butcher retro keffiyeh dreamcatcher synth. <br />
<br />
Cosby sweater eu banh mi, qui irure terry richardson
ex squid. Aliquip placeat salvia cillum iphone. Seitan
aliquip quis cardigan american apparel, butcher
voluptate nisi qui.
</p>
</div>
</div>
</div>
<!-- card -->
<div class="card">
<div class="card-header" id="headingseven">
<a class="collapsed" href="#collapseseven" data-bs-toggle="collapse" role="button"
aria-expanded="false">Accordions title here</a>
</div>
<div id="collapseseven" class="collapse" data-bs-parent="#accordionTwo">
<div class="card-body">
<p class="text">
Raw denim you probably haven’t heard of them jean
shorts Austin. Nesciunt tofu stumptown aliqua, retro
synth master cleanse. Mustache cliche tempor,
williamsburg carles vegan helvetica. Reprehenderit
butcher retro keffiyeh dreamcatcher synth. <br />
<br />
Cosby sweater eu banh mi, qui irure terry richardson
ex squid. Aliquip placeat salvia cillum iphone. Seitan
aliquip quis cardigan american apparel, butcher
voluptate nisi qui.
</p>
</div>
</div>
</div>
<!-- card -->
<div class="card">
<div class="card-header" id="headingEight">
<a class="collapsed" href="#collapseEight" data-bs-toggle="collapse" role="button"
aria-expanded="false">Accordions title here</a>
</div>
<div id="collapseEight" class="collapse" data-bs-parent="#accordionTwo">
<div class="card-body">
<p class="text">
Raw denim you probably haven’t heard of them jean
shorts Austin. Nesciunt tofu stumptown aliqua, retro
synth master cleanse. Mustache cliche tempor,
williamsburg carles vegan helvetica. Reprehenderit
butcher retro keffiyeh dreamcatcher synth. <br />
<br />
Cosby sweater eu banh mi, qui irure terry richardson
ex squid. Aliquip placeat salvia cillum iphone. Seitan
aliquip quis cardigan american apparel, butcher
voluptate nisi qui.
</p>
</div>
</div>
</div>
<!-- card -->
<div class="card">
<div class="card-header" id="headingNine">
<a class="collapsed" href="#collapseNine" data-bs-toggle="collapse" role="button"
aria-expanded="false">Accordions title here</a>
</div>
<div id="collapseNine" class="collapse" data-bs-parent="#accordionTwo">
<div class="card-body">
<p class="text">
Raw denim you probably haven’t heard of them jean
shorts Austin. Nesciunt tofu stumptown aliqua, retro
synth master cleanse. Mustache cliche tempor,
williamsburg carles vegan helvetica. Reprehenderit
butcher retro keffiyeh dreamcatcher synth. <br />
<br />
Cosby sweater eu banh mi, qui irure terry richardson
ex squid. Aliquip placeat salvia cillum iphone. Seitan
aliquip quis cardigan american apparel, butcher
voluptate nisi qui.
</p>
</div>
</div>
</div>
<!-- card -->
<div class="card">
<div class="card-header" id="headingTen">
<a class="collapsed" href="#collapseTen" data-bs-toggle="collapse" role="button"
aria-expanded="false">Accordions title here</a>
</div>
<div id="collapseTen" class="collapse" data-bs-parent="#accordionTwo">
<div class="card-body">
<p class="text">
Raw denim you probably haven’t heard of them jean
shorts Austin. Nesciunt tofu stumptown aliqua, retro
synth master cleanse. Mustache cliche tempor,
williamsburg carles vegan helvetica. Reprehenderit
butcher retro keffiyeh dreamcatcher synth. <br />
<br />
Cosby sweater eu banh mi, qui irure terry richardson
ex squid. Aliquip placeat salvia cillum iphone. Seitan
aliquip quis cardigan american apparel, butcher
voluptate nisi qui.
</p>
</div>
</div>
</div>
<!-- card -->
</div>
</div>
<!-- card -->
</div>
<!-- accordion style two -->
/* accordion-style-two */
.accordion-style-two .accordion .card {
margin-top: 8px;
border: 1px solid var(--gray-4) !important;
border-radius: 4px;
}
.accordion-style-two .accordion .card .card-header {
padding: 0;
background: none;
}
.accordion-style-two .accordion .card .card-header a {
display: block;
font-size: 16px;
font-weight: 700;
line-height: 24px;
position: relative;
color: var(--white);
-webkit-transition: all 0.3s ease-out 0s;
-moz-transition: all 0.3s ease-out 0s;
-ms-transition: all 0.3s ease-out 0s;
-o-transition: all 0.3s ease-out 0s;
transition: all 0.3s ease-out 0s;
border: 1px solid var(--primary);
margin: -1px;
border-radius: 4px;
padding: 13px 16px;
z-index: 5;
background-color: var(--primary);
}
.accordion-style-two .accordion .card .card-header a::before {
position: absolute;
content: "\ea5e";
font-family: lineicons !important;
right: 16px;
top: 14px;
font-size: 16px;
-webkit-transition: all 0.3s ease-out 0s;
-moz-transition: all 0.3s ease-out 0s;
-ms-transition: all 0.3s ease-out 0s;
-o-transition: all 0.3s ease-out 0s;
transition: all 0.3s ease-out 0s;
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
}
.accordion-style-two .accordion .card .card-header a.collapsed {
color: var(--black);
border-color: var(--gray-4);
background-color: transparent;
}
.accordion-style-two .accordion .card .card-header a.collapsed::before {
-webkit-transform: rotate(0);
-moz-transform: rotate(0);
-ms-transform: rotate(0);
-o-transform: rotate(0);
transform: rotate(0);
}
.accordion-style-two .accordion .card .card-body {
padding: 16px;
}
.accordion-style-two .accordion .card .card-body .text {
color: var(--dark-3);
}
Accordions Style 3
<div class="single-accordion">
<div class="accordion-style-three">
<div class="accordion" id="accordionthree">
<div class="card">
<div class="card-header" id="headingEleven">
<a href="#collapseEleven" data-bs-toggle="collapse" role="button" aria-expanded="true">Accordions
title here</a>
</div>
<div id="collapseEleven" class="collapse show" data-bs-parent="#accordionthree">
<div class="card-body">
<p class="text">
Raw denim you probably haven’t heard of them jean
shorts Austin. Nesciunt tofu stumptown aliqua, retro
synth master cleanse. Mustache cliche tempor,
williamsburg carles vegan helvetica. Reprehenderit
butcher retro keffiyeh dreamcatcher synth. <br />
<br />
Cosby sweater eu banh mi, qui irure terry richardson
ex squid. Aliquip placeat salvia cillum iphone. Seitan
aliquip quis cardigan american apparel, butcher
voluptate nisi qui.
</p>
</div>
</div>
</div>
<!-- card -->
<div class="card">
<div class="card-header" id="headingTwelve">
<a class="collapsed" href="#collapseTwelve" data-bs-toggle="collapse" role="button"
aria-expanded="false">Accordions title here</a>
</div>
<div id="collapseTwelve" class="collapse" data-bs-parent="#accordionthree">
<div class="card-body">
<p class="text">
Raw denim you probably haven’t heard of them jean
shorts Austin. Nesciunt tofu stumptown aliqua, retro
synth master cleanse. Mustache cliche tempor,
williamsburg carles vegan helvetica. Reprehenderit
butcher retro keffiyeh dreamcatcher synth. <br />
<br />
Cosby sweater eu banh mi, qui irure terry richardson
ex squid. Aliquip placeat salvia cillum iphone. Seitan
aliquip quis cardigan american apparel, butcher
voluptate nisi qui.
</p>
</div>
</div>
</div>
<!-- card -->
<div class="card">
<div class="card-header" id="headingThirteen">
<a class="collapsed" href="#collapseThirteen" data-bs-toggle="collapse" role="button"
aria-expanded="false">Accordions title here</a>
</div>
<div id="collapseThirteen" class="collapse" data-bs-parent="#accordionthree">
<div class="card-body">
<p class="text">
Raw denim you probably haven’t heard of them jean
shorts Austin. Nesciunt tofu stumptown aliqua, retro
synth master cleanse. Mustache cliche tempor,
williamsburg carles vegan helvetica. Reprehenderit
butcher retro keffiyeh dreamcatcher synth. <br />
<br />
Cosby sweater eu banh mi, qui irure terry richardson
ex squid. Aliquip placeat salvia cillum iphone. Seitan
aliquip quis cardigan american apparel, butcher
voluptate nisi qui.
</p>
</div>
</div>
</div>
<!-- card -->
<div class="card">
<div class="card-header" id="headingFourteen">
<a class="collapsed" href="#collapseFourteen" data-bs-toggle="collapse" role="button"
aria-expanded="false">Accordions title here</a>
</div>
<div id="collapseFourteen" class="collapse" data-bs-parent="#accordionthree">
<div class="card-body">
<p class="text">
Raw denim you probably haven’t heard of them jean
shorts Austin. Nesciunt tofu stumptown aliqua, retro
synth master cleanse. Mustache cliche tempor,
williamsburg carles vegan helvetica. Reprehenderit
butcher retro keffiyeh dreamcatcher synth. <br />
<br />
Cosby sweater eu banh mi, qui irure terry richardson
ex squid. Aliquip placeat salvia cillum iphone. Seitan
aliquip quis cardigan american apparel, butcher
voluptate nisi qui.
</p>
</div>
</div>
</div>
<!-- card -->
<div class="card">
<div class="card-header" id="headingFifteen">
<a class="collapsed" href="#collapseFifteen" data-bs-toggle="collapse" role="button"
aria-expanded="false">Accordions title here</a>
</div>
<div id="collapseFifteen" class="collapse" data-bs-parent="#accordionthree">
<div class="card-body">
<p class="text">
Raw denim you probably haven’t heard of them jean
shorts Austin. Nesciunt tofu stumptown aliqua, retro
synth master cleanse. Mustache cliche tempor,
williamsburg carles vegan helvetica. Reprehenderit
butcher retro keffiyeh dreamcatcher synth. <br />
<br />
Cosby sweater eu banh mi, qui irure terry richardson
ex squid. Aliquip placeat salvia cillum iphone. Seitan
aliquip quis cardigan american apparel, butcher
voluptate nisi qui.
</p>
</div>
</div>
</div>
<!-- card -->
</div>
</div>
<!-- card -->
</div>
<!-- accordion style three -->
/* accordion-style-three */
.accordion-style-three .accordion .card {
border-radius: 0;
border: 0;
overflow: visible;
}
.accordion-style-three .accordion .card .card-header {
padding: 0;
background: none;
}
.accordion-style-three .accordion .card .card-header a {
display: block;
font-size: 16px;
font-weight: 700;
line-height: 24px;
position: relative;
color: var(--white);
-webkit-transition: all 0.3s ease-out 0s;
-moz-transition: all 0.3s ease-out 0s;
-ms-transition: all 0.3s ease-out 0s;
-o-transition: all 0.3s ease-out 0s;
transition: all 0.3s ease-out 0s;
border: 2px solid var(--primary);
border-radius: 0;
padding: 13px 16px;
z-index: 5;
border-left: 0;
border-right: 0;
background: var(--primary);
margin-top: -2px;
}
.accordion-style-three .accordion .card .card-header a::before {
position: absolute;
content: "\ea5e";
font-family: lineicons !important;
right: 16px;
top: 14px;
font-size: 16px;
-webkit-transition: all 0.3s ease-out 0s;
-moz-transition: all 0.3s ease-out 0s;
-ms-transition: all 0.3s ease-out 0s;
-o-transition: all 0.3s ease-out 0s;
transition: all 0.3s ease-out 0s;
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
}
.accordion-style-three .accordion .card .card-header a.collapsed {
color: var(--black);
border: 2px solid var(--light-1);
background: transparent;
border-left: 0;
border-right: 0;
}
.accordion-style-three .accordion .card .card-header a.collapsed::before {
-webkit-transform: rotate(0);
-moz-transform: rotate(0);
-ms-transform: rotate(0);
-o-transform: rotate(0);
transform: rotate(0);
}
.accordion-style-three .accordion .card .card-body {
padding: 16px;
}
.accordion-style-three .accordion .card .card-body .text {
color: var(--dark-3);
}
Accordions Style 4
<div class="single-accordion">
<div class="accordion-style-four">
<div class="accordion" id="accordionFour">
<div class="card">
<div class="card-header" id="headingSixteen">
<a href="#collapseSixteen" data-bs-toggle="collapse" role="button" aria-expanded="true">Accordions
title here</a>
</div>
<div id="collapseSixteen" class="collapse show" data-bs-parent="#accordionFour">
<div class="card-body">
<p class="text">
Raw denim you probably haven’t heard of them jean
shorts Austin. Nesciunt tofu stumptown aliqua, retro
synth master cleanse. Mustache cliche tempor,
williamsburg carles vegan helvetica. Reprehenderit
butcher retro keffiyeh dreamcatcher synth. <br />
<br />
Cosby sweater eu banh mi, qui irure terry richardson
ex squid. Aliquip placeat salvia cillum iphone. Seitan
aliquip quis cardigan american apparel, butcher
voluptate nisi qui.
</p>
</div>
</div>
</div>
<!-- card -->
<div class="card">
<div class="card-header" id="headingseventeen">
<a class="collapsed" href="#collapseseventeen" data-bs-toggle="collapse" role="button"
aria-expanded="false">Accordions title here</a>
</div>
<div id="collapseseventeen" class="collapse" data-bs-parent="#accordionFour">
<div class="card-body">
<p class="text">
Raw denim you probably haven’t heard of them jean
shorts Austin. Nesciunt tofu stumptown aliqua, retro
synth master cleanse. Mustache cliche tempor,
williamsburg carles vegan helvetica. Reprehenderit
butcher retro keffiyeh dreamcatcher synth. <br />
<br />
Cosby sweater eu banh mi, qui irure terry richardson
ex squid. Aliquip placeat salvia cillum iphone. Seitan
aliquip quis cardigan american apparel, butcher
voluptate nisi qui.
</p>
</div>
</div>
</div>
<!-- card -->
<div class="card">
<div class="card-header" id="headingEightteen">
<a class="collapsed" href="#collapseEightteen" data-bs-toggle="collapse" role="button"
aria-expanded="false">Accordions title here</a>
</div>
<div id="collapseEightteen" class="collapse" data-bs-parent="#accordionFour">
<div class="card-body">
<p class="text">
Raw denim you probably haven’t heard of them jean
shorts Austin. Nesciunt tofu stumptown aliqua, retro
synth master cleanse. Mustache cliche tempor,
williamsburg carles vegan helvetica. Reprehenderit
butcher retro keffiyeh dreamcatcher synth. <br />
<br />
Cosby sweater eu banh mi, qui irure terry richardson
ex squid. Aliquip placeat salvia cillum iphone. Seitan
aliquip quis cardigan american apparel, butcher
voluptate nisi qui.
</p>
</div>
</div>
</div>
<!-- card -->
<div class="card">
<div class="card-header" id="headingNineteen">
<a class="collapsed" href="#collapseNineteen" data-bs-toggle="collapse" role="button"
aria-expanded="false">Accordions title here</a>
</div>
<div id="collapseNineteen" class="collapse" data-bs-parent="#accordionFour">
<div class="card-body">
<p class="text">
Raw denim you probably haven’t heard of them jean
shorts Austin. Nesciunt tofu stumptown aliqua, retro
synth master cleanse. Mustache cliche tempor,
williamsburg carles vegan helvetica. Reprehenderit
butcher retro keffiyeh dreamcatcher synth. <br />
<br />
Cosby sweater eu banh mi, qui irure terry richardson
ex squid. Aliquip placeat salvia cillum iphone. Seitan
aliquip quis cardigan american apparel, butcher
voluptate nisi qui.
</p>
</div>
</div>
</div>
<!-- card -->
<div class="card">
<div class="card-header" id="headingTwenty">
<a class="collapsed" href="#collapseTwenty" data-bs-toggle="collapse" role="button"
aria-expanded="false">Accordions title here</a>
</div>
<div id="collapseTwenty" class="collapse" data-bs-parent="#accordionFour">
<div class="card-body">
<p class="text">
Raw denim you probably haven’t heard of them jean
shorts Austin. Nesciunt tofu stumptown aliqua, retro
synth master cleanse. Mustache cliche tempor,
williamsburg carles vegan helvetica. Reprehenderit
butcher retro keffiyeh dreamcatcher synth. <br />
<br />
Cosby sweater eu banh mi, qui irure terry richardson
ex squid. Aliquip placeat salvia cillum iphone. Seitan
aliquip quis cardigan american apparel, butcher
voluptate nisi qui.
</p>
</div>
</div>
</div>
<!-- card -->
</div>
</div>
<!-- card -->
</div>
<!-- accordion style four -->
/* accordion-style-four */
.accordion-style-four .accordion .card {
margin-top: 8px;
border-radius: 0;
border: 0;
}
.accordion-style-four .accordion .card .card-header {
padding: 0;
background: none;
}
.accordion-style-four .accordion .card .card-header a {
display: block;
font-size: 16px;
font-weight: 700;
line-height: 24px;
position: relative;
color: var(--white);
-webkit-transition: all 0.3s ease-out 0s;
-moz-transition: all 0.3s ease-out 0s;
-ms-transition: all 0.3s ease-out 0s;
-o-transition: all 0.3s ease-out 0s;
transition: all 0.3s ease-out 0s;
margin: -1px;
border-radius: 0;
padding: 13px 16px;
z-index: 5;
border: 0;
background: var(--primary);
}
.accordion-style-four .accordion .card .card-header a::before {
position: absolute;
content: "\ea5e";
font-family: lineicons !important;
right: 16px;
top: 14px;
font-size: 16px;
-webkit-transition: all 0.3s ease-out 0s;
-moz-transition: all 0.3s ease-out 0s;
-ms-transition: all 0.3s ease-out 0s;
-o-transition: all 0.3s ease-out 0s;
transition: all 0.3s ease-out 0s;
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
}
.accordion-style-four .accordion .card .card-header a.collapsed {
color: var(--black);
border-color: var(--gray-4);
background: var(--light-2);
}
.accordion-style-four .accordion .card .card-header a.collapsed::before {
-webkit-transform: rotate(0);
-moz-transform: rotate(0);
-ms-transform: rotate(0);
-o-transform: rotate(0);
transform: rotate(0);
}
.accordion-style-four .accordion .card .card-body {
padding: 16px;
}
.accordion-style-four .accordion .card .card-body .text {
color: var(--dark-3);
}