JavaScript Tab Navigation with Indicator

JavaScript Tab Navigation with Indicator
Code Snippet:Tabs
Author: Younes
Published: January 20, 2024
Last Updated: January 22, 2024
Downloads: 642
License: MIT
Edit Code online: View on CodePen
Read More

Tabs are a great way to organize and display content on your website in an organized and user-friendly manner. This JavaScript code enables tab navigation with an indicator. It allows switching content by clicking tabs. The method hides and displays content panels, applying active styling to the selected tab.

This code improves user experience by organizing and displaying information in an easily navigable way.

How to Create Tab Navigation With Indicator in JavaScript

1. First of all, load the Normalize CSS and Google Fonts by adding the following CDN links into the head tag of your HTML document.

<link href="https://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

2. Create the HTML structure for your tabbed navigation system. The following code includes a container for tabs and content panels. You can customize the tab names and content as needed.

<div class="tabs">
	<nav class="tabs-nav">
		<ol class="nav-list">
			<li class="nav-item">
				<a href="#description" class="nav-link">Description</a>
			</li>
			<li class="nav-item">
				<a href="#updates" class="nav-link">Updates</a>
			</li>
			<li class="nav-item">
				<a href="#donations" class="nav-link">Donations</a>
			</li>
		</ol>
	</nav>

	<div class="tabs-panels">
		<div class="tabs-panel" id="description" style="">Here you will find the description.</div>
		<div class="tabs-panel" id="updates" style="display: none;">Here you will find updates.</div>
		<div class="tabs-panel" id="donations" style="display: none;">Here you will find
			<a href="">donations</a>.</div>
	</div>

</div>

3. Now, include the following CSS code in the <style> section of your HTML document or in an external CSS file. This code defines the styling for your tabs and content panels. You can modify the styles to match your website’s design.

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  padding: 0.5rem;
  background: #ddd;
  font-family: 'Roboto', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

ul,
ol {
  list-style: none;
  padding: 0;
  margin: 0;
}

.tabs {
  max-width: 40rem;
  margin: 2rem auto;
}

.nav-list {
  display: flex;
  background: #fff;
  border-bottom: 1px solid #ddd;
}

.nav-item {
  flex: 0 0 8rem;
}

.nav-link {
  display: block;
  padding: 1rem;
  border-top: 3px solid transparent;
  text-decoration: none;
  text-align: center;
  color: inherit;
  outline: none;
}

.nav-link:hover,
.nav-link:focus,
.nav-link:active,
.nav-link--active {
  font-weight: bold;
}

.nav-link--active {
  border-top-color: sienna;
}

.tabs-panels {
  background: #fff;
}

.tabs-panel {
  padding: 2rem;
}

4. Finally, copy the following JavaScript code and place it just before the closing </body> tag in your HTML document. This code is responsible for handling tab navigation and indicator functionality.

const doc = document
const tabsPanels = [...doc.querySelectorAll('.tabs-panel')]
const navLinks = [...doc.querySelectorAll('.nav-link')]

function hideTabsPanels() {
  tabsPanels.forEach(panel => {
    panel.style.display = 'none'
  })
}

const activeClassName = 'nav-link--active'

function removeActiveStyle() {
  navLinks.forEach(link => {
    link.classList.remove(activeClassName)
  })
}

function addActiveStyle(el) {
  el.classList.add(activeClassName)
}

hideTabsPanels()

const hash = window.location.hash

if (hash) {
  const panelName = hash.slice(1)
  doc.getElementById(panelName).style.display = ''
  addActiveStyle(doc.querySelector('[href="#' + panelName + '"]'))
} else {
  tabsPanels[0].style.display = ''
  addActiveStyle(doc.querySelector('.nav-link'))
}

navLinks.forEach(link => {
  link.addEventListener('click', function() {
    const panelName = this.href.slice(this.href.indexOf('#') + 1)
    hideTabsPanels()
    doc.getElementById(panelName).style.display = ''
    removeActiveStyle()
    addActiveStyle(this)
  })
})

window.addEventListener('hashchange', function() {
  hideTabsPanels()
  const panelName = window.location.hash.slice(1)
  doc.getElementById(panelName).style.display = ''
  removeActiveStyle()
  addActiveStyle(doc.querySelector('[href="#' + panelName + '"]'))
})

That’s all! hopefully, you have successfully created Tab Navigation with Indicator using JavaScript. If you have any questions or suggestions, feel free to comment below.

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

About CodeHim

Free Web Design Code & Scripts - CodeHim is one of the BEST developer websites that provide web designers and developers with a simple way to preview and download a variety of free code & scripts. All codes published on CodeHim are open source, distributed under OSD-compliant license which grants all the rights to use, study, change and share the software in modified and unmodified form. Before publishing, we test and review each code snippet to avoid errors, but we cannot warrant the full correctness of all content. All trademarks, trade names, logos, and icons are the property of their respective owners... find out more...

Please Rel0ad/PressF5 this page if you can't click the download/preview link

X