How to create tabs in HTML | JavaScript | React
3 min readNov 14, 2022
Let’s Connect on Preplaced.com, Book Your Free Trial!
Please SUBSCRIBE YouTube Channel: FrontEnd Interview Preparation
The following code snippet uses HTML, JavaScript, and CSS to create tabs:
Implementation using JavaScript
<html>
<head>
</head>
<body>
<h3>Click on the tabs below:</h3>
<div class="tab">
<button class="tablinks" onclick="clickHandle(event, 'Cat')">Cat</button>
<button class="tablinks" onclick="clickHandle(event, 'Bear')">Bear</button>
<button class="tablinks" onclick="clickHandle(event, 'Dog')">Dog</button>
</div>
<div id="Cat" class="tabcontent">
<h3>Meowww.</h3>
</div>
<div id="Bear" class="tabcontent">
<h3>Rawrrr.</h3>
</div>
<div id="Dog" class="tabcontent">
<h3>Bork Bork.</h3>
</div>
<script>
function clickHandle(evt, animalName) {
let i, tabcontent, tablinks;
// This is to clear the previous clicked content.
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
// Set the tab to be "active".
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
// Display the clicked tab and set it to active.
document.getElementById(animalName).style.display = "block";
evt.currentTarget.className += " active";
}
</script>
</body>
</html>CSS,
/* Style the tab */
.tab {
overflow: hidden;
border: 1px solid #ccc;
background-color: #f1f1f1;
}
/* Style the buttons inside the tab */
.tab button {
background-color: inherit;
float: left;
border: none;
outline: none;
cursor: pointer;
padding: 14px 16px;
transition: 0.3s;
font-size: 17px;
}
/* Change background color of buttons on hover */
.tab button:hover {
background-color: #ddd;
}
/* Create an active/current tablink class */
.tab button.active {
background-color: #ccc;
}
/* Style the tab content */
.tabcontent {
display: none;
padding: 6px 12px;
border: 1px solid #ccc;
border-top: none;
}Explanation
- Lines 6–10 create the three buttons that act as tabs. All of them have an
onClickhandler associated with them. - Lines 12–22 create the content to be displayed once the tabs are clicked.
- Lines 24–44 contain the JavaScript code for the
clickHandlefunction, which is invoked when a tab button is clicked. The function sets the clicked tab to be active and displays its corresponding content.
Implementation using React
import React, { useState } from 'react';
function App() {
const [tabId, setTabId] = useState('tab1');
const handleClick = (id) => {
setTabId(id);
};
const tabContent = {
tab1: 'Content of Tab1',
tab2: 'Content of Tab2',
tab3: 'Content of Tab3',
};
return (
<div style={{ border: '1px solid black' }}>
<div className="tabs" style={{ display: 'flex' }}>
<div
id="tab1"
style={{
padding: '10px',
'border-right': '1px solid black',
'background-color': tabId === 'tab1' && 'green',
}}
onClick={() => handleClick('tab1')}
>
Tab1
</div>
<div
id="tab2"
style={{
padding: '10px',
'border-right': '1px solid black',
'background-color': tabId === 'tab2' && 'green',
}}
onClick={() => handleClick('tab2')}
>
Tab2
</div>
<div
id="tab3"
style={{
padding: '10px',
'border-right': '1px solid black',
'background-color': tabId === 'tab3' && 'green',
}}
onClick={() => handleClick('tab3')}
>
Tab3
</div>
</div>
<hr />
<div className="tab-content" style={{ height: '100px' }}>
{tabContent[tabId]}
</div>
</div>
);
}
export default App;Thanks for reading
- 👏 Please clap for the story and follow me 👉
- 📰 View more content on Coding and System Design Interviews
- 🔔 Follow me: LinkedIn!
I know there would always be something to improve. Please feel free to share your thoughts
