<div class="style-1">
  <h2>Accordion Style 1</h2>
  <div id="accordion-1" class="row">
    <div class="col-12">
      <div class="yg-card-wrapper">
        <div class="card-header collapsed" data-toggle="collapse" data-target="#style-1-tab-1">
          <a class="card-title">Sed laoreet lacus ut nunc ultricies, nec blandit ipsum placerat</a>
        </div>
        <div id="style-1-tab-1" class="card-body collapse" data-parent="#accordion-1">
            <p>Suspendisse sed leo aliquam, porta risus sit amet, tristique libero. Vivamus aliquam tincidunt enim nec commodo. Sed vehicula iaculis aliquam. Cras vitae scelerisque eros, sed maximus enim. In euismod urna id porttitor eleifend. Sed porta nibh in risus imperdiet, a pretium nibh scelerisque. Ut blandit ullamcorper lectus, quis ultrices felis pulvinar vel. Ut mollis molestie mollis. Sed iaculis magna ut arcu facilisis, sed varius justo aliquam.</p>
        </div>
      </div>
    </div>
    <div class="col-12">
      <div class="yg-card-wrapper">
        <div class="card-header collapsed" data-toggle="collapse" data-target="#style-1-tab-2">
          <a class="card-title">Aenean a egestas massa. Curabitur turpis nisl</a>
        </div>
        <div id="style-1-tab-2" class="card-body collapse" data-parent="#accordion-1">
            <p>Suspendisse sed leo aliquam, porta risus sit amet, tristique libero. Vivamus aliquam tincidunt enim nec commodo. Sed vehicula iaculis aliquam. Cras vitae scelerisque eros, sed maximus enim. In euismod urna id porttitor eleifend. Sed porta nibh in risus imperdiet, a pretium nibh scelerisque. Ut blandit ullamcorper lectus, quis ultrices felis pulvinar vel. Ut mollis molestie mollis. Sed iaculis magna ut arcu facilisis, sed varius justo aliquam.</p>
        </div>
      </div>
    </div>
    <div class="col-12">
      <div class="yg-card-wrapper">
        <div class="card-header collapsed" data-toggle="collapse" data-target="#style-1-tab-3">
          <a class="card-title">Proin sollicitudin tellus sem, in commodo eros laoreet eu</a>
        </div>
        <div id="style-1-tab-3" class="card-body collapse" data-parent="#accordion-1">
            <p>Suspendisse sed leo aliquam, porta risus sit amet, tristique libero. Vivamus aliquam tincidunt enim nec commodo. Sed vehicula iaculis aliquam. Cras vitae scelerisque eros, sed maximus enim. In euismod urna id porttitor eleifend. Sed porta nibh in risus imperdiet, a pretium nibh scelerisque. Ut blandit ullamcorper lectus, quis ultrices felis pulvinar vel. Ut mollis molestie mollis. Sed iaculis magna ut arcu facilisis, sed varius justo aliquam.</p>
        </div>
      </div>
    </div>
    <div class="col-12">
      <div class="yg-card-wrapper">
        <div class="card-header collapsed" data-toggle="collapse" data-target="#style-1-tab-4">
          <a class="card-title">Maecenas elementum lacus vitae mattis faucibus</a>
        </div>
        <div id="style-1-tab-4" class="card-body collapse" data-parent="#accordion-1">
            <p>Suspendisse sed leo aliquam, porta risus sit amet, tristique libero. Vivamus aliquam tincidunt enim nec commodo. Sed vehicula iaculis aliquam. Cras vitae scelerisque eros, sed maximus enim. In euismod urna id porttitor eleifend. Sed porta nibh in risus imperdiet, a pretium nibh scelerisque. Ut blandit ullamcorper lectus, quis ultrices felis pulvinar vel. Ut mollis molestie mollis. Sed iaculis magna ut arcu facilisis, sed varius justo aliquam.</p>
        </div>
      </div>
    </div>
  </div>
</div>  
          

  <div class="style-2">
  <h2>Accordion Style 2</h2>
  <div id="accordion-2" class="row">
    <div class="col-12">
      <div class="yg-card-wrapper">
        <div class="card-header collapsed" data-toggle="collapse" data-target="#style-2-tab-1">
          <a class="card-title">Sed laoreet lacus ut nunc ultricies, nec blandit ipsum placerat</a>
        </div>
        <div id="style-2-tab-1" class="card-body collapse" data-parent="#accordion-2">
            <p>Suspendisse sed leo aliquam, porta risus sit amet, tristique libero. Vivamus aliquam tincidunt enim nec commodo. Sed vehicula iaculis aliquam. Cras vitae scelerisque eros, sed maximus enim. In euismod urna id porttitor eleifend. Sed porta nibh in risus imperdiet, a pretium nibh scelerisque. Ut blandit ullamcorper lectus, quis ultrices felis pulvinar vel. Ut mollis molestie mollis. Sed iaculis magna ut arcu facilisis, sed varius justo aliquam.</p>
        </div>
      </div>
    </div>
    <div class="col-12">
      <div class="yg-card-wrapper">
        <div class="card-header collapsed" data-toggle="collapse" data-target="#style-2-tab-2">
          <a class="card-title">Aenean a egestas massa. Curabitur turpis nisl</a>
        </div>
        <div id="style-2-tab-2" class="card-body collapse" data-parent="#accordion-2">
            <p>Suspendisse sed leo aliquam, porta risus sit amet, tristique libero. Vivamus aliquam tincidunt enim nec commodo. Sed vehicula iaculis aliquam. Cras vitae scelerisque eros, sed maximus enim. In euismod urna id porttitor eleifend. Sed porta nibh in risus imperdiet, a pretium nibh scelerisque. Ut blandit ullamcorper lectus, quis ultrices felis pulvinar vel. Ut mollis molestie mollis. Sed iaculis magna ut arcu facilisis, sed varius justo aliquam.</p>
        </div>
      </div>
    </div>
    <div class="col-12">
      <div class="yg-card-wrapper">
        <div class="card-header collapsed" data-toggle="collapse" data-target="#style-2-tab-3">
          <a class="card-title">Proin sollicitudin tellus sem, in commodo eros laoreet eu</a>
        </div>
        <div id="style-2-tab-3" class="card-body collapse" data-parent="#accordion-2">
            <p>Suspendisse sed leo aliquam, porta risus sit amet, tristique libero. Vivamus aliquam tincidunt enim nec commodo. Sed vehicula iaculis aliquam. Cras vitae scelerisque eros, sed maximus enim. In euismod urna id porttitor eleifend. Sed porta nibh in risus imperdiet, a pretium nibh scelerisque. Ut blandit ullamcorper lectus, quis ultrices felis pulvinar vel. Ut mollis molestie mollis. Sed iaculis magna ut arcu facilisis, sed varius justo aliquam.</p>
        </div>
      </div>
    </div>
    <div class="col-12">
      <div class="yg-card-wrapper">
        <div class="card-header collapsed" data-toggle="collapse" data-target="#style-2-tab-4">
          <a class="card-title">Maecenas elementum lacus vitae mattis faucibus</a>
        </div>
        <div id="style-2-tab-4" class="card-body collapse" data-parent="#accordion-2">
            <p>Suspendisse sed leo aliquam, porta risus sit amet, tristique libero. Vivamus aliquam tincidunt enim nec commodo. Sed vehicula iaculis aliquam. Cras vitae scelerisque eros, sed maximus enim. In euismod urna id porttitor eleifend. Sed porta nibh in risus imperdiet, a pretium nibh scelerisque. Ut blandit ullamcorper lectus, quis ultrices felis pulvinar vel. Ut mollis molestie mollis. Sed iaculis magna ut arcu facilisis, sed varius justo aliquam.</p>
        </div>
      </div>
    </div>
  </div>
</div>  
          

  <div class="style-3">
  <h2>Accordion Style 3</h2>
  <div id="accordion-3" class="row">
    <div class="col-12">
      <div class="yg-card-wrapper">
        <div class="card-header collapsed" data-toggle="collapse" data-target="#style-3-tab-1">
          <a class="card-title">Sed laoreet lacus ut nunc ultricies, nec blandit ipsum placerat</a>
        </div>
        <div id="style-3-tab-1" class="card-body collapse" data-parent="#accordion-3">
            <p>Suspendisse sed leo aliquam, porta risus sit amet, tristique libero. Vivamus aliquam tincidunt enim nec commodo. Sed vehicula iaculis aliquam. Cras vitae scelerisque eros, sed maximus enim. In euismod urna id porttitor eleifend. Sed porta nibh in risus imperdiet, a pretium nibh scelerisque. Ut blandit ullamcorper lectus, quis ultrices felis pulvinar vel. Ut mollis molestie mollis. Sed iaculis magna ut arcu facilisis, sed varius justo aliquam.</p>
        </div>
      </div>
    </div>
    <div class="col-12">
      <div class="yg-card-wrapper">
        <div class="card-header collapsed" data-toggle="collapse" data-target="#style-3-tab-2">
          <a class="card-title">Aenean a egestas massa. Curabitur turpis nisl</a>
        </div>
        <div id="style-3-tab-2" class="card-body collapse" data-parent="#accordion-3">
            <p>Suspendisse sed leo aliquam, porta risus sit amet, tristique libero. Vivamus aliquam tincidunt enim nec commodo. Sed vehicula iaculis aliquam. Cras vitae scelerisque eros, sed maximus enim. In euismod urna id porttitor eleifend. Sed porta nibh in risus imperdiet, a pretium nibh scelerisque. Ut blandit ullamcorper lectus, quis ultrices felis pulvinar vel. Ut mollis molestie mollis. Sed iaculis magna ut arcu facilisis, sed varius justo aliquam.</p>
        </div>
      </div>
    </div>
    <div class="col-12">
      <div class="yg-card-wrapper">
        <div class="card-header collapsed" data-toggle="collapse" data-target="#style-3-tab-3">
          <a class="card-title">Proin sollicitudin tellus sem, in commodo eros laoreet eu</a>
        </div>
        <div id="style-3-tab-3" class="card-body collapse" data-parent="#accordion-3">
            <p>Suspendisse sed leo aliquam, porta risus sit amet, tristique libero. Vivamus aliquam tincidunt enim nec commodo. Sed vehicula iaculis aliquam. Cras vitae scelerisque eros, sed maximus enim. In euismod urna id porttitor eleifend. Sed porta nibh in risus imperdiet, a pretium nibh scelerisque. Ut blandit ullamcorper lectus, quis ultrices felis pulvinar vel. Ut mollis molestie mollis. Sed iaculis magna ut arcu facilisis, sed varius justo aliquam.</p>
        </div>
      </div>
    </div>
    <div class="col-12">
      <div class="yg-card-wrapper">
        <div class="card-header collapsed" data-toggle="collapse" data-target="#style-3-tab-4">
          <a class="card-title">Maecenas elementum lacus vitae mattis faucibus</a>
        </div>
        <div id="style-3-tab-4" class="card-body collapse" data-parent="#accordion-3">
            <p>Suspendisse sed leo aliquam, porta risus sit amet, tristique libero. Vivamus aliquam tincidunt enim nec commodo. Sed vehicula iaculis aliquam. Cras vitae scelerisque eros, sed maximus enim. In euismod urna id porttitor eleifend. Sed porta nibh in risus imperdiet, a pretium nibh scelerisque. Ut blandit ullamcorper lectus, quis ultrices felis pulvinar vel. Ut mollis molestie mollis. Sed iaculis magna ut arcu facilisis, sed varius justo aliquam.</p>
        </div>
      </div>
    </div>
  </div>
</div> 
          

<div class="style-4">
<h2>Accordion Style 4</h2>
<div id="accordion-4" class="row">
  <div class="col-12">
    <div class="yg-card-wrapper">
      <div class="card-header collapsed" data-toggle="collapse" data-target="#style-4-tab-1">
        <a class="card-title">Sed laoreet lacus ut nunc ultricies, nec blandit ipsum placerat</a>
      </div>
      <div id="style-4-tab-1" class="card-body collapse" data-parent="#accordion-4">
          <p>Suspendisse sed leo aliquam, porta risus sit amet, tristique libero. Vivamus aliquam tincidunt enim nec commodo. Sed vehicula iaculis aliquam. Cras vitae scelerisque eros, sed maximus enim. In euismod urna id porttitor eleifend. Sed porta nibh in risus imperdiet, a pretium nibh scelerisque. Ut blandit ullamcorper lectus, quis ultrices felis pulvinar vel. Ut mollis molestie mollis. Sed iaculis magna ut arcu facilisis, sed varius justo aliquam.</p>
      </div>
    </div>
  </div>
  <div class="col-12">
    <div class="yg-card-wrapper">
      <div class="card-header collapsed" data-toggle="collapse" data-target="#style-4-tab-2">
        <a class="card-title">Aenean a egestas massa. Curabitur turpis nisl</a>
      </div>
      <div id="style-4-tab-2" class="card-body collapse" data-parent="#accordion-4">
          <p>Suspendisse sed leo aliquam, porta risus sit amet, tristique libero. Vivamus aliquam tincidunt enim nec commodo. Sed vehicula iaculis aliquam. Cras vitae scelerisque eros, sed maximus enim. In euismod urna id porttitor eleifend. Sed porta nibh in risus imperdiet, a pretium nibh scelerisque. Ut blandit ullamcorper lectus, quis ultrices felis pulvinar vel. Ut mollis molestie mollis. Sed iaculis magna ut arcu facilisis, sed varius justo aliquam.</p>
      </div>
    </div>
  </div>
  <div class="col-12">
    <div class="yg-card-wrapper">
      <div class="card-header collapsed" data-toggle="collapse" data-target="#style-4-tab-3">
        <a class="card-title">Proin sollicitudin tellus sem, in commodo eros laoreet eu</a>
      </div>
      <div id="style-4-tab-3" class="card-body collapse" data-parent="#accordion-4">
          <p>Suspendisse sed leo aliquam, porta risus sit amet, tristique libero. Vivamus aliquam tincidunt enim nec commodo. Sed vehicula iaculis aliquam. Cras vitae scelerisque eros, sed maximus enim. In euismod urna id porttitor eleifend. Sed porta nibh in risus imperdiet, a pretium nibh scelerisque. Ut blandit ullamcorper lectus, quis ultrices felis pulvinar vel. Ut mollis molestie mollis. Sed iaculis magna ut arcu facilisis, sed varius justo aliquam.</p>
      </div>
    </div>
  </div>
  <div class="col-12">
    <div class="yg-card-wrapper">
      <div class="card-header collapsed" data-toggle="collapse" data-target="#style-4-tab-4">
        <a class="card-title">Maecenas elementum lacus vitae mattis faucibus</a>
      </div>
      <div id="style-4-tab-4" class="card-body collapse" data-parent="#accordion-4">
          <p>Suspendisse sed leo aliquam, porta risus sit amet, tristique libero. Vivamus aliquam tincidunt enim nec commodo. Sed vehicula iaculis aliquam. Cras vitae scelerisque eros, sed maximus enim. In euismod urna id porttitor eleifend. Sed porta nibh in risus imperdiet, a pretium nibh scelerisque. Ut blandit ullamcorper lectus, quis ultrices felis pulvinar vel. Ut mollis molestie mollis. Sed iaculis magna ut arcu facilisis, sed varius justo aliquam.</p>
      </div>
    </div>
  </div>
</div>
</div>