In my project, I am exploring the use of divs as tabs with jQuery. Within these divs, I also want to incorporate another jQuery plugin. Currently, I have manually created these div tabs using jQuery and set the default style for second and subsequent divs to display: none either through pure css or a specified class name. However, when I change the display property of the divs to display: block, the second jQuery plugin within the div stops functioning.
The issue arises when attempting to hide the divs without utilizing pure css or a class name, as there is a noticeable delay (approximately 1 second) when the HTML page loads. Are there any alternative suggestions to address this delay apart from implementing a loading icon?
I have experimented with using bootstrap tabs, but unfortunately, the problem persists. How can I effectively utilize a pre-defined class or pure css to initially set the visibility of the divs to display: none, allowing for their subsequent display upon client interaction while ensuring the proper functionality of the second jQuery plugin embedded within?
<div class="tabs-wrapper">
<div class="tab-container tab1">
some code here
</div>
<div class="tab-container tab2 d-none">
<div>
second jquery plugin code here
</div>
</div>
</div>
<button id="btn1">Btn1</button>
<button id="btn2">Btn2</button>
<script>
$(function(){
$('#btn1').click(function () {
$('.tabs-wrapper .tab1').addClass('d-none');
$('.tabs-wrapper .tab2').removeClass('d-none');
});
$('#btn2').click(function () {
$('.tabs-wrapper .tab2').removeClass('d-none');
$('.tabs-wrapper .tab1').addClass('d-none');
});
});
</script>
Issues arise when attempting to hide divs using a css class or inline styling, as the second jQuery plugin (e.g., sliders) ceases to function correctly.