Toggle Tabs
Home
Snippets
Toggle Tabs
HTML
CSS
JS
<div class="tabs-container"> <div class="tab-buttons"> <button class="tab-btn active" data-tab="tab1">Overview</button> <button class="tab-btn" data-tab="tab2">Features</button> <button class="tab-btn" data-tab="tab3">Contact</button> </div> <div class="tab-content active" id="tab1"> <h3>Overview</h3> <p>This is a modern toggle tab component built with HTML, CSS, and JavaScript.</p> </div> <div class="tab-content" id="tab2"> <h3>Features</h3> <ul> <li>Responsive layout</li> <li>Custom styling</li> <li>Easy to integrate</li> </ul> </div> <div class="tab-content" id="tab3"> <h3>Contact</h3> <p>Email us at <strong>info@example.com</strong> for more details.</p> </div> </div>
body { font-family: sans-serif; background: #f5f5f5; margin: 0; padding: 40px; display: flex; justify-content: center; } .tabs-container { width: 100%; max-width: 600px; background: white; border-radius: 8px; box-shadow: 0 4px 20px rgba(0,0,0,0.1); } .tab-buttons { display: flex; border-bottom: 2px solid #ddd; } .tab-buttons button { flex: 1; padding: 15px; background: none; border: none; cursor: pointer; font-size: 16px; transition: background 0.3s; } .tab-buttons button.active { background: #007BFF; color: white; } .tab-content { padding: 0 20px 10px 20px; display: none; } .tab-content.active { display: block; }
const tabButtons = document.querySelectorAll(".tab-btn"); const tabContents = document.querySelectorAll(".tab-content"); tabButtons.forEach(button => { button.addEventListener("click", () => { tabButtons.forEach(btn => btn.classList.remove("active")); tabContents.forEach(tab => tab.classList.remove("active")); button.classList.add("active"); document.getElementById(button.dataset.tab).classList.add("active"); }); });
Ad #1
Ad #2
Scroll to Top