HTML-CSS-JavaScript-Project-10-Accordion

A small, focused project demonstrating a responsive Tabs & Accordion component built with plain HTML, CSS and JavaScript.

This repository shows a tidy approach to toggling content using DOM events and utility classes — perfect as a learning reference or a lightweight UI component for small sites.

What you'll find

• A responsive tabs interface that collapses into an accessible accordion on narrow screens.
• Lightweight, dependency-free JavaScript (no frameworks).
• Clean, readable CSS with simple transitions.

Features

• Tabbed navigation with content panels
• Accordion behavior for mobile sizes
• Smooth CSS transitions and focus styles for accessibility
• Minimal, easy-to-adapt markup

Tech

• HTML5
• CSS3
• JavaScript (Vanilla)

File structure

index.html          # Main page and markup
style.css           # Styling and 
script.js           # Tab/accordion behaviour
README.md           # This file

Run / Preview

The project is static — to view it, simply open index.html in your browser. For a local server (recommended when using editor extensions):

Usage

• Click a tab to switch panels on larger screens.
• On smaller screens the tabs become an accordion; click an item header to expand its content.

Accessibility notes

• Panels are keyboard-focusable and use ARIA-friendly semantics where appropriate. You can tweak tabindex/aria attributes in index.html if you need stronger screen-reader support.

Contributing

Small, focused contributions are welcome: bug fixes, accessibility improvements, or suggestions to simplify the markup/CSS. Open a PR with a short description of the change.

Contact

Built by Usman — find more of my work on GitHub: https://github.com/usmanmobeen111

-- Thank you for checking out this project — feel free to reuse the component in your own pages.