Easy Tabs Component 📑

A lightweight and efficient tab-switching component built with Vanilla JavaScript. This project demonstrates clean DOM manipulation, CSS animations, and optimized event handling.

🔗 View Live Demo on GitHub Pages

📋 Description

This project implements a classic "Tabs" user interface pattern. It allows content to be organized into multiple sections where only one section is visible at a time. The switching happens instantly without page reloads, providing a smooth user experience.

The demo features excerpts from the works of the famous Ukrainian poet Taras Shevchenko.

✨ Features

• Event Delegation: The click handler is attached to the parent element (tabsParent) rather than individual tabs. This is a memory-efficient approach that improves performance.
• Smooth Animations: Content appears with a subtle fade-in effect using CSS @keyframes.
• Dynamic Logic: The script is flexible and can handle any number of tabs as long as the HTML structure is maintained.
• Active State Tracking: Highlighting the selected tab for better UX/UI feedback.

🛠 Tech Stack

• HTML5 (Semantic structure)
• CSS3 (Flexbox layout, Keyframes animations for .fade effect)
• JavaScript (ES6+)
  • DOM Manipulation (classList management)
  • Event Delegation pattern

⚙️ How It Works (JS Logic)

The component relies on two core functions:

1. hideTabContent(): Hides all content blocks and removes the active class from all tab headers.
2. showTabContent(index): Displays the specific content block and highlights the tab corresponding to the provided index.

When a user clicks a tab, the script identifies the index of the clicked element and updates the UI accordingly.

🚀 Installation & Setup

1. Clone the repository:

   git clone [https://github.com/igarok88/-easyTabs.git](https://github.com/igarok88/-easyTabs.git)

2. Open index.html in your browser.

📂 Project Structure

• index.html — Main structure for tabs and content.
• style.css — Layout styles and utility classes (.show, .hide, .fade).
• script.js — Tab switching logic and event listeners.

---

Created for educational purposes.