Previously, I created a functionality for handling a single set of tabs. However, as the application has expanded, this functionality is no longer sufficient to accommodate multiple sets of tabs.
The initial function looked like this:
var iconTabs = function () {
$('#icons-tabs a:not(:first)').addClass('inactive');
$('.icons-container').hide();
$('.icons-container:first').show();
$('#icons-tabs a').click(function(){
var t = $(this).attr('id');
if($(this).hasClass('inactive')) {
$('#icons-tabs a').addClass('inactive');
$(this).removeClass('inactive');
$('.icons-container').hide();
$('#'+ t + 'C').fadeIn('slow');
}
});
};
And here is the corresponding html:
<div id="fragment-1" class="fragments text-center">
<div class="icons-container" id="tab1C">
{{!-- Content --}}
</div>
<div class="icons-container" id="tab2C">
{{!-- Content --}}
</div>
<div class="fragments-parent">
<div class="fragments-icons fragments-parent--child">
<div class="items" id="icons-tabs">
<a href="#" class="item" id="tab1"></a>
<a href="#" class="item" id="tab2"></a>
<a href="#" class="item" id="tab3"></a>
<a href="#" class="item" id="tab4"></a>
</div>
</div>
</div>
</div>
Now, with additional sections being added in the html, such as the second section, the code has evolved:
<div id="fragment-1" class="fragments text-center">
<div class="icons-container" id="tab1C">
{{!-- Content --}}
</div>
<div class="icons-container" id="tab2C">
{{!-- Content --}}
</div>
<div class="fragments-parent">
<div class="fragments-icons fragments-parent--child">
<div class="items" id="icons-tabs">
<a href="#" class="item" id="tab1"></a>
<a href="#" class="item" id="tab2"></a>
</div>
</div>
</div>
</div>
<div id="fragment-2" class="fragments text-center">
<div class="icons-container" id="tab5C">
{{!-- Content --}}
</div>
<div class="icons-container" id="ta62C">
{{!-- Content --}}
</div>
<div class="fragments-parent">
<div class="fragments-icons fragments-parent--child">
<div class="items" id="icons-tabs">
<a href="#" class="item" id="tab5"></a>
<a href="#" class="item" id="tab6"></a>
</div>
</div>
</div>
</div>
A JSFiddle has been provided for testing purposes:
The goal now is to make the functionality dynamic and ensure that each set of tabs behaves independently. In the current setup, the second set of tabs does not work as intended, and the aim is to isolate the behavior of each set of tabs without interference from others.