How to show or hide tab-based content in eCommerce platforms?

[Kumar2573]

<ul id="tab__{{ section.id }}" class="tabs">
<li>
<a id="tname_{{ section.id }}" href="#tab-{{ section.id }}-1" class="active">
{{ section.settings.id}}
</a>
</li>
<li><a id="tname_{{ section.id }}" href="#tab-{{ section.id }}-2">{{ section.settings.id }}</a></li>
</ul>

<!-- start content -->

<div class="tc_wrps pricing-tables-content var-c" id="anchor-link">
{% for block in section.blocks %}
<div id="tab-{{ section.id }}-{{ forloop.index }}" class="div-block-32 row" {% unless forloop.first %}style="display:none;"{% endunless %}>
testttt


</div>
{% endfor %}
</div>

<script>
$(document).ready(function() {
$('#tab__{{ section.id }} a').click(function(e){
e.preventDefault();
$(this).closest('.subs-warpper').find('.tabs li a').removeClass('active');
$(this).closest('.subs-warpper').find('.div-block-32').hide();
$(this).addClass('active');
var id = $(this).attr("href");
$(""+id).show();
return false;
});
});
</script>