Responsive Vertical Tabs

by jay prakash

HTML

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Responsive Vertical Tabs with Animation</title>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
	<link rel="stylesheet" href="styles.css">
</head>
<body>
	<div class="tab-container">
		<div class="tabs">
			<button class="tab active" data-target="content1"><i class="fas fa-home"></i> Home</button>
			<button class="tab" data-target="content2"><i class="fas fa-info-circle"></i> About</button>
			<button class="tab" data-target="content3"><i class="fas fa-image"></i> Gallery</button>
			<button class="tab" data-target="content4"><i class="fas fa-envelope"></i> Contact</button>
		</div>
		<div class="tab-content">
			<div class="content active" id="content1">
				<h2>Home</h2>
				<p>Welcome to our responsive vertical tabs demo.</p>
			</div>
			<div class="content" id="content2">
				<h2>About</h2>
				<p>Learn more about our responsive vertical tabs with smooth animation.</p>
			</div>
			<div class="content" id="content3">
				<h2>Gallery</h2>
				<p>Check out our image gallery with responsive design and animation effects.</p>
			</div>
			<div class="content" id="content4">
				<h2>Contact</h2>
				<p>Get in touch with us via our responsive contact form.</p>
			</div>
		</div>
	</div>
	<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
	<script src="scripts.js"></script>
</body>
</html>

CSS

* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

body {
	background-color: #f5f5f5;
	font-family: Arial, sans-serif;
	padding: 20px;
}

.tab-content h2 {
	margin-bottom: 10px;
}

.tab-container {
	background: #fff;
	border: 1px solid #ccc;
	display: flex;
	margin: 0 auto;
	max-width: 800px;
	overflow: hidden;
	width: 100%;
}

.tabs {
	background-color: #228B22;
	width: 200px;
}

.tabs button {
	background: none;
	border: none;
	border-bottom: rgba(255, 255, 255, 0.2);
	color: #fff;
	cursor: pointer;
	display: block;
	font-size: 16px;
	outline: none;
	padding: 15px 20px;
	position: relative;
	text-align: left;
	transition: background 0.3s;
	width: 100%;
}

.tabs button::before {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 1px;
	background-color: rgba(255, 255, 255, 0.25);
}

.tabs button:last-child::before {
	display: none;
}

.tabs button:hover {
	background-color: #006400;
}

.tabs button.active {
	background-color: #006400;
}

.tabs i {
	margin-right: 5px;
}

.tab-content {
	flex: 1;
	position: relative;
}

.tab-content .content {
	display: none;
	left: 0;
	padding: 20px;
	position: absolute;
	top: 0;
	width: 100%;
}

.tab-content .content.active {
	display: block;
}

/* Responsive Styles */
@media (max-width: 767px) {
	.tab-container {
		flex-direction: column;
	}

	.tabs {
		width: 100%;
	}

	.tabs button {
		text-align: center;
	}

	.tab-content .content {
		position: static;
	}
}

JavaScript

$(document).ready(function() {
	$('.tabs button').click(function() {
		if ($(this).hasClass('active')) {
			return;
		}
		var target = $(this).attr('data-target');
		$('.tabs button').removeClass('active');
		$(this).addClass('active');
		$('.tab-content .content').removeClass('active').css({ display: 'none' });

		// Show the target content panel with an animation.
		$('#' + target)
			.css({ opacity: 0, top: '20px' })
			.addClass('active')
			.css({ display: 'block' })
			.animate({ opacity: 1, top: '0' }, 300);
	});
});