Currently, I am developing a website using polymer elements such as code-header-panel and paper-tabs.
In my markup, I have several <section> tags that I want to display or hide based on specific paper-tab clicks.
Here is the HTML markup for the tabs:
<paper-tabs selected="0">
<paper-tab id="name" name="home">Home</paper-tab>
<paper-tab id="about" name="about">About IEEE</paper-tab>
<paper-tab id="sbm" name="sbm">IEEE SBM</paper-tab>
<paper-tab id="committee" name="committee">Committee</paper-tab>
<paper-tab id="contact" name="contact">Contact Us</paper-tab>
</paper-tabs>
Below is my CSS code:
section#about{
display: none;
position: absolute;
}
And this is my JavaScript/jQuery code:
$(document).ready(function(){
var a = "";
var tabs = document.querySelector('paper-tabs');
tabs.addEventListener('core-select', function(e) {
a = this.selected;
if(!e.detail.isSelected){$("section").fadeOut();}
setTimeout(function(){
$("section#"+a).fadeIn();
}, 500);
});
})
The issue arises when testing this code on Firefox. When clicking on the about tab, the home section fades out but the about section does not appear. I have tried using methods such as .fadeIn(), .show(), and .addClass() without success. Can someone provide guidance on how to resolve this problem?
Any assistance would be greatly appreciated.