Elements Accordions

<div class="tabs-listing mt-2">
   <ul class="product-tabs list-unstyled d-flex-wrap border-bottom m-0 d-none d-md-flex">
      <li rel="description" class="active"><a class="tablink">Description</a></li>
      <li rel="size-chart"><a class="tablink">Size Chart</a></li>
      <li rel="shipping-return"><a class="tablink">Shipping & Return</a></li>
      <li rel="reviews"><a class="tablink">Reviews</a></li>
      <li rel="addtional-tabs"><a class="tablink">Addtional Tabs</a></li>
   </ul>
   <div class="tab-container">
      <h3 class="tabs-ac-style d-md-none active" rel="description">Description</h3>
      <div id="description" class="tab-content">
         Description
      </div>
      <h3 class="tabs-ac-style d-md-none" rel="size-chart">Size Chart</h3>
      <div id="size-chart" class="tab-content">
         Size Chart
      </div>
      <h3 class="tabs-ac-style d-md-none" rel="shipping-return">Shipping & Return</h3>
      <div id="shipping-return" class="tab-content">
         Shipping & Return
      </div>
      <h3 class="tabs-ac-style d-md-none" rel="reviews">Review</h3>
      <div id="reviews" class="tab-content">
         Review
      </div>
      <h3 class="tabs-ac-style d-md-none" rel="addtional-tabs">Addtional Tabs</h3>
      <div id="addtional-tabs" class="tab-content">
         Addtional Tabs
      </div>
   </div>
</div>

<div class="tabs-listing style2 mt-2">
   <ul class="product-tabs style2 list-unstyled d-flex-wrap justify-content-center m-0 d-none d-md-flex">
      <li rel="description2" class="active"><a class="tablink">Description</a></li>
      <li rel="size-chart2"><a class="tablink">Size Chart</a></li>
      <li rel="shipping-return2"><a class="tablink">Shipping & Return</a></li>
      <li rel="reviews2"><a class="tablink">Reviews</a></li>
      <li rel="addtional-tabs2"><a class="tablink">Addtional Tabs</a></li>
   </ul>
   <div class="tab-container">
      <h3 class="tabs-ac-style d-md-none active" rel="description2">Description</h3>
      <div id="description2" class="tab-content">
         Description
      </div>
      <h3 class="tabs-ac-style d-md-none" rel="size-chart2">Size Chart</h3>
      <div id="size-chart2" class="tab-content">
         Size Chart
      </div>
      <h3 class="tabs-ac-style d-md-none" rel="shipping-return2">Shipping & Return</h3>
      <div id="shipping-return2" class="tab-content">
         Shipping & Return
      </div>
      <h3 class="tabs-ac-style d-md-none" rel="reviews2">Review</h3>
      <div id="reviews2" class="tab-content">
         Review
      </div>
      <h3 class="tabs-ac-style d-md-none" rel="addtional-tabs2">Addtional Tabs</h3>
      <div id="addtional-tabs2" class="tab-content">
         Addtional Tabs
      </div>
   </div>
</div>

<div class="tabs-listing style2 mt-2">
   <ul class="product-tabs style2 list-unstyled d-flex-wrap justify-content-center m-0 d-none d-md-flex">
      <li rel="description3" class="active"><a class="tablink rounded">Description</a></li>
      <li rel="size-chart3"><a class="tablink rounded">Size Chart</a></li>
      <li rel="shipping-return3"><a class="tablink rounded">Shipping & Return</a></li>
      <li rel="reviews3"><a class="tablink rounded">Reviews</a></li>
      <li rel="addtional-tabs3"><a class="tablink rounded">Addtional Tabs</a></li>
   </ul>
   <div class="tab-container">
      <h3 class="tabs-ac-style rounded d-md-none active" rel="description3">Description</h3>
      <div id="description3" class="tab-content">
         Description
      </div>
      <h3 class="tabs-ac-style rounded d-md-none" rel="size-chart3">Size Chart</h3>
      <div id="size-chart3" class="tab-content">
         Size Chart
      </div>
      <h3 class="tabs-ac-style rounded d-md-none" rel="shipping-return3">Shipping & Return</h3>
      <div id="shipping-return3" class="tab-content">
         Shipping & Return
      </div>
      <h3 class="tabs-ac-style rounded d-md-none" rel="reviews3">Review</h3>
      <div id="reviews3" class="tab-content">
         Review
      </div>
      <h3 class="tabs-ac-style rounded d-md-none" rel="addtional-tabs3">Addtional Tabs</h3>
      <div id="addtional-tabs3" class="tab-content">
         Addtional Tabs
      </div>
   </div>
</div>

<div class="tabs-listing style2 mt-2">
   <ul class="product-tabs style2 list-unstyled d-flex-wrap m-0 d-none d-md-flex">
      <li rel="description4" class="active"><a class="tablink rounded-pill">Description</a></li>
      <li rel="size-chart4"><a class="tablink rounded-pill">Size Chart</a></li>
      <li rel="shipping-return4"><a class="tablink rounded-pill">Shipping & Return</a></li>
      <li rel="reviews4"><a class="tablink rounded-pill">Reviews</a></li>
      <li rel="addtional-tabs4"><a class="tablink rounded-pill">Addtional Tabs</a></li>
   </ul>
   <div class="tab-container">
      <h3 class="tabs-ac-style rounded-pill d-md-none active" rel="description4">Description</h3>
      <div id="description4" class="tab-content">
         Description
      </div>
      <h3 class="tabs-ac-style rounded-pill d-md-none" rel="size-chart4">Size Chart</h3>
      <div id="size-chart4" class="tab-content">
         Size Chart
      </div>
      <h3 class="tabs-ac-style rounded-pill d-md-none" rel="shipping-return4">Shipping & Return</h3>
      <div id="shipping-return4" class="tab-content">
         Shipping & Return
      </div>
      <h3 class="tabs-ac-style rounded-pill d-md-none" rel="reviews4">Review</h3>
      <div id="reviews4" class="tab-content">
         Review
      </div>
      <h3 class="tabs-ac-style rounded-pill d-md-none" rel="addtional-tabs4">Addtional Tabs</h3>
      <div id="addtional-tabs4" class="tab-content">
         Addtional Tabs
      </div>
   </div>
</div>

<div class="tabs-listing style3 mt-2">
   <ul class="product-tabs style3 list-unstyled d-flex-wrap border-bottom justify-content-center m-0 d-none d-md-flex">
      <li rel="description5" class="active"><a class="tablink">Description</a></li>
      <li rel="size-chart5"><a class="tablink">Size Chart</a></li>
      <li rel="shipping-return5"><a class="tablink">Shipping & Return</a></li>
      <li rel="reviews5"><a class="tablink">Reviews</a></li>
      <li rel="addtional-tabs5"><a class="tablink">Addtional Tabs</a></li>
   </ul>
   <div class="tab-container">
      <h3 class="tabs-ac-style d-md-none active" rel="description5">Description</h3>
      <div id="description5" class="tab-content">
         Description
      </div>
      <h3 class="tabs-ac-style d-md-none" rel="size-chart5">Size Chart</h3>
      <div id="size-chart5" class="tab-content">
         Size Chart
      </div>
      <h3 class="tabs-ac-style d-md-none" rel="shipping-return5">Shipping & Return</h3>
      <div id="shipping-return5" class="tab-content">
         Shipping & Return
      </div>
      <h3 class="tabs-ac-style d-md-none" rel="reviews5">Review</h3>
      <div id="reviews5" class="tab-content">
         Review
      </div>
      <h3 class="tabs-ac-style d-md-none" rel="addtional-tabs5">Addtional Tabs</h3>
      <div id="addtional-tabs5" class="tab-content">
         Addtional Tabs
      </div>
   </div>
</div>

<div class="accordion tab-accordian-style" id="productAccordian">
   <div class="accordion-item border-0 bg-transparent mb-2">
      <h2 class="accordion-header" id="headingOne"><button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">Description</button></h2>
      <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#productAccordian">
         <div class="accordion-body px-0 product-description">
            Description
         </div>
      </div>
   </div>
   <div class="accordion-item border-0 bg-transparent mb-2">
      <h2 class="accordion-header" id="headingTwo"><button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">Size Chart</button></h2>
      <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#productAccordian">
         <div class="accordion-body px-0 pb-3" id="size-chart">
            Size Chart 
         </div>
      </div>
   </div>
   <div class="accordion-item border-0 bg-transparent mb-2">
      <h2 class="accordion-header" id="headingThree"><button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">Shipping & Return</button></h2>
      <div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#productAccordian">
         <div class="accordion-body px-0" id="shipping-return">
            Shipping & Return
         </div>
      </div>
   </div>
   <div class="accordion-item border-0 bg-transparent mb-2">
      <h2 class="accordion-header" id="headingFour"><button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseFour" aria-expanded="false" aria-controls="collapseFour">Reviews</button></h2>
      <div id="collapseFour" class="accordion-collapse collapse" aria-labelledby="headingFour" data-bs-parent="#productAccordian">
         <div class="accordion-body px-0" id="reviews">
            Review
         </div>
      </div>
   </div>
   <div class="accordion-item border-0 bg-transparent mb-2">
      <h2 class="accordion-header" id="headingFive"><button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseFive" aria-expanded="false" aria-controls="collapseFive">Addtional Tabs</button></h2>
      <div id="collapseFive" class="accordion-collapse collapse" aria-labelledby="headingFive" data-bs-parent="#productAccordian">
         <div class="accordion-body px-0" id="addtional-tabs">
            Addtional Tabs
         </div>
      </div>
   </div>
</div>

<div class="row tab-vertical-style">
    <div class="col-12 col-sm-3 md-0">
        <div class="nav flex-column nav-pills" id="vertical-tab" role="tablist" aria-orientation="vertical">
            <a class="nav-link active" id="description-tab" data-bs-toggle="pill" href="#description" role="tab" aria-controls="description" aria-selected="true">Description</a>
            <a class="nav-link" id="sizeChart-tab" data-bs-toggle="pill" href="#sizeChart" role="tab" aria-controls="sizeChart" aria-selected="false">Size Chart</a>
            <a class="nav-link" id="shippingReturn-tab" data-bs-toggle="pill" href="#shippingReturn" role="tab" aria-controls="shippingReturn" aria-selected="false">Shipping & Return</a>
            <a class="nav-link" id="reviewt-tab" data-bs-toggle="pill" href="#reviewt" role="tab" aria-controls="reviewt" aria-selected="false">Reviews</a>
            <a class="nav-link" id="addtional-tab" data-bs-toggle="pill" href="#addtional" role="tab" aria-controls="addtional" aria-selected="false">Addtional Tabs</a>
        </div>
    </div>
    <div class="col-12 col-sm-9">
        <div class="tab-content d-block" id="vertical-tabContent">
            <div class="tab-pane fade show active" id="description" role="tabpanel" aria-labelledby="description-tab">
                Description
            </div>
            <div class="tab-pane fade" id="sizeChart" role="tabpanel" aria-labelledby="sizeChart-tab">
                Size Chart 
            </div>
            <div class="tab-pane fade" id="shippingReturn" role="tabpanel" aria-labelledby="shippingReturn-tab">
                Shipping & Return 
            </div>
            <div class="tab-pane fade" id="reviewt" role="tabpanel" aria-labelledby="reviewt-tab">
                Review
            </div>
            <div class="tab-pane fade" id="addtional" role="tabpanel" aria-labelledby="addtional-tab">
                Addtional Tabs 
            </div>
        </div>
    </div>
</div>