Bootstrap Accordions - Component Snippets

<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);
}

<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);
}

<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);
}

<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);
}