The idea is to get all the links and responding IDs, hide content that is not 'active'. When clicked, the anchor link should open is corresponding content.
The Markup
<div class="navbar">
<nav>
<ul class="navTabs">
<li class="active">
<a href="#tab1">
Tab 1
</a>
</li>
<li>
<a href="#tab2">
Tab 2
</a>
</li>
<li>
<a href="#tab3">
Tab 3
</a>
</li>
</ul>
</nav>
</div>
<div class="navcontent">
<div class="content" id="tab1">
<h4>
Tab 1
</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="content" id="tab2">
<h4>
Tab 2
</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
<div class="content" id="tab3">
<h4>
Tab 3
</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
</div>
The script
$('ul.navTabs').each(function() {
var $active, $content, $links = $(this).find('a');
$active = $($links.filter('[href="' + location.hash + '"]')[0] || $links[0]);
$active.addClass('active');
$content = $($active[0].hash);
$links.not($active).each(function() {
$(this.hash).hide();
});
$(this).on('click', 'a', function(e) {
e.preventDefault();
$active.removeClass('active');
$content.hide();
$active = $(this);
$content = $(this.hash);
$active.addClass('active');
$content.show();
});
});
The above script code works and the challenge is to re-write that into ES6 (which I have done below but doesn't work as expected). Here is a jsFiddle code to illustrate the issue that I am facing.
$("ul.navTabs > li").each((index, element) => {
// keep track of tabs and associated content
const anchorTag = $(element).find("a");
let active = anchorTag;
let content = anchorTag;
const links = anchorTag;
// if identifyUrlHash matches one of the links, use that as active tab
// if no match found, use first link as initial active tab
const identifyUrlHash = window.location.hash;
active = $(links.filter(`[href="${identifyUrlHash}"]`)[0] || links[0]);
active.addClass("active");
content = $(active[0].hash);
// hide the remaining content
links.not(active).each(element, (subindex, subelement) => {
$(subelement.hash).hide();
});
$(element).on("click", "a", (event) => {
event.preventDefault();
// old tab inactive
active.removeClass("active");
content.hide();
// update variables with new link and content
active = $(element);
content = $(element.hash);
// make tab active
element.addClass("active");
content.show();
});
});