Tabs not working, all tabs content is shown together

Highlighted
New Member
2 0 0

Hello, i added tabs in my product page, it's showing all 3 tabs contents togheter, it's not hidden.

<div class="tabs">
<ul class="tab-switch__nav">
<li>
<a href="#description" data-link="description" class="tab-switch__trigger h3">{{ 'products.product.description' | t }}</a>
</li>
<li>
<a href="#extra" data-link="extra" class="tab-switch__trigger h3" >{{ pages[section.settings.extra_tab_content].title }}</a>
</li>
<li>
<a href="#shopify-product-reviews" data-link="shopify-product-reviews" class="tab-switch__trigger h3" > Review </a>
</li>
</ul>
<div id="description" class="tab-switch__content" data-content="description">
<div class="product-description rte" itemprop="description">
{{ product.description }}
</div>
</div>
<div id="extra" class="tab-switch__content" data-content="extra">
<div class="rte">
{{ pages[section.settings.extra_tab_content].content }}
</div>
</div>
<div class="tab-switch__content">
<div id="shopify-product-reviews" data-id="{{product.id}}" data-content="shopify-product-reviews">{{ product.metafields.spr.reviews }}</div>
</div>

 

.tabs {
margin: $gutter 0;

}

.tab-switch__nav {
padding: 0;
list-style: none;
border-top: 1px solid $colorBorder;
border-bottom: 1px solid $colorBorder;
margin: $gutter 0;
text-align: center;
position: relative;

li {
display: inline-block;
padding: $gutter / 2;
margin-bottom: 0;

}

li:first-child {
border-right: 1px solid $colorBorder;
}

}

.tab-switch__trigger {
display: block;
color: $colorTextBody;
font-weight: $bodyFontWeight;
margin: 0;

&:hover,
&:active {
font-weight: $bodyFontWeight;
}

&.is-active {
font-weight: $bodyFontWeightBold;
color: $colorTextBody;
}
}

.tab-switch__content {
display: block;


&.is-hidden {
display: none;
}
}

0 Likes