Build Custom Tabs with HTML CSS and JavaScript

Tabs are a user interface element of a website or app that organizes content in a structured and space-saving manner. These tabs usually present a lot of information horizontally or vertically in limited space. Tabs have buttons above or next to them that act as navigation. A user can switch from one section to another by clicking on these buttons. Thus, a visitor or user does not have to scroll or navigate to a separate page. Today we will create a simple tab interface with HTML CSS and javascript that you can use in your projects. Before collecting the code, watching the video tutorial below will help you understand the code. Besides, if you like the content of our channel, you can subscribe to our channel.

Video Tutorial:

We hope you have watched the video. This user interface is now used by several sorts of websites. Online stores, news, and magazine websites, restaurant and food delivery websites, event websites, educational websites, portfolio websites, real estate websites, etc. are a few of them. Utilizing this web UI interface has several advantages, such as efficient use of space, visual clarity, mobile friendliness, aesthetics, etc.

If you want to organize a lot of information and present it nicely to your users or visitors, then tabs can be an essential element for you. Tabs can be beneficial for your website if you care about visual organization and space efficiency. Users can get all the important information of a website in one place through tabs. As a result, they do not require additional scrolling.

You May also like:

Build Custom Tabs with HTML CSS and JavaScript [ Source Code ]:

First, you need to create an HTML and a CSS file for this project. We have added the javascript part below the HTML file but you can create a separate JS file to paste the javascript code we used here. Remember to add the JS file to your HTML file. Copy the code from the code box below and paste it into your files. If you have any problems after testing it in the browser, download the code from the download button below.

ADD HTML:

<!DOCTYPE html>  
<html lang="en">
<!-- divinectorweb.com -->
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Simple Tab Design using HTML CSS and Javascript</title>
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    
    <div class="tab-content">
        <div class="wrapper">
            <div class="single-btn">
                <button class="t-btn btn-active" onclick="simpleTab(0)">What is HTML?</button>
                <button class="t-btn" onclick="simpleTab(1)">What is javascript?</button>
                <button class="t-btn" onclick="simpleTab(2)">What is CSS?</button>
            </div>
            <div class="tab" id="tab1">
                <h2>html</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident</p>
            </div>
            <div class="tab" id="tab2">
                <h2>javascript</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor </p>
            </div>
            <div class="tab" id="tab3">
                <h2>css</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate </p>
            </div>
        </div>
    </div>


    <script>
        function simpleTab(myBtn) {
        let tabs = document.getElementsByClassName("tab");
        for (let i = 0; i < tabs.length; i++) {
            tabs[i].style.display = "none";
        }
        tabs[myBtn].style.display = "block";

        
        let buttons = document.getElementsByClassName("t-btn");
        for (let i = 0; i < buttons.length; i++) {
            buttons[i].classList.remove("btn-active");
        }
        
        buttons[myBtn].classList.add("btn-active");
        }

        simpleTab(0);

</script>
</body>
</html>

ADD CSS:

body {
	background: #4d5bf9;
	font-family: 'Montserrat', sans-serif;
}
.wrapper {
	width: 600px;
	height: 400px;
	box-shadow: 0 10px 12px 15px rgba(0, 0, 0, 0.2);
}
.tab-content {
	display: grid;
	place-items: center;
	height: 100vh;
}
.single-btn {
	display: flex;
}
.t-btn {
	background-color: #ffffff;
	border: none;
	padding: 10px 25px;
	cursor: pointer;
	height: 40px;
	font-size: 15px;
	font-family: 'Montserrat', sans-serif;
	font-weight: 500;
	width: 200px;
}
.t-btn:hover {
	background-color: #8a98ff;
	color: #fff;
}
.tab {
	display: none;
	width: 90%;
	padding: 20px;
	background-color: #fff;
	padding: 30px;
	height: 300px;
	text-align: center;
}
.tab h2 {
	-webkit-text-fill-color: transparent;
	-webkit-text-stroke: 1px #000;
	font-size: 45px;
	margin: 0;
	padding: 0;
	text-transform: uppercase;
}
.tab p {
	color: #464646;
	line-height: 2;
}
.btn-active {
	background-color: #e4e9fd;
	transform: scaleY(1.05);
	transform-origin: bottom;
}

We hope the code is correctly functioning for you. Go ahead and use this code once you've made all the necessary adjustments. There are many more such snippets on our website that may come in handy for your next project. Go to the homepage of our website and click on the Load More button below. You can find lots of snippets related to CSS animations, complete website design, JavaScript projects, etc. Hopefully, you'll find some snippets that might be useful for you. We appreciate you taking the time to visit our website.

DOWNLOAD CODE

Video Tutorial:

Build Custom Tabs with HTML CSS and JavaScript [ Source Code ]:

Post a Comment

Post a Comment

About Us

Contact Form

Build Custom Tabs with HTML CSS and JavaScript

Video Tutorial:

Build Custom Tabs with HTML CSS and JavaScript [ Source Code ]:

You might like

Post a Comment

Post a Comment

Contact Form