Вертикальные вкладки

Преимуществом данной реализации табов является их адаптивный вариант, при котором контент каждой вкладки расположен сразу за ее названием (по аналогии с аккордеоном).

Кроме этого, каждая вкладка в данном решении имеет одинаковый HTML-код, что упрощает интеграцию в любую CMS (не нужно проставлять различные ID, классы и другие атрибуты).

Пример:

1 Пункт Название вкладки

Описание вкладки

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, sunt in culpa qui officia deserunt mollit anim id est laborum.

2 Пункт Длинное название вкладки в несколько строк

Описание вкладки

3 Пункт Название вкладки

Описание вкладки

HTML:

<div class="tabs">
	<div class="tab">
		<div class="tab-toggle">
			<span class="tab-nums">
				<span class="tab-num">1</span>
				<span class="tab-tab">Пункт</span>
			</span> 	
			<span class="tab-name">Название вкладки</span>	
		</div>
	</div>
	<div class="content">
		<p>Описание вкладки</p>			
	</div>
	
	<!-- Еще вкладки -->
	
	<div class="tab">
		<div class="tab-toggle">
			<span class="tab-nums">
				<span class="tab-num">10</span>
				<span class="tab-tab">Пункт</span>
			</span> 	
			<span class="tab-name">Название вкладки</span>	
		</div>
	</div>
	<div class="content">
		<p>Описание вкладки</p>			
	</div>
</div>

<span class="tab-tab">Пункт</span>

</span>

<span class="tab-name">Название вкладки</span>

</div>

<p>Описание вкладки</p>

</div>

<span class="tab-tab">Пункт</span>

</span>

<span class="tab-name">Название вкладки</span>

</div>

<p>Описание вкладки</p>

</div>

CSS:

.tabs * {
	box-sizing: border-box;
}		
.tabs {
	position: relative;
	margin: 20px 10px;
}
.tabs:after{
	display:table;
	content:"";
	clear:both;
}
.tabs .tab .tab-toggle {
	display: flex;
	border: 2px solid #BFE2FF;
	padding: 4px 40px 4px 0;
	border-radius: 16px;
	margin-bottom: 8px;
	position: relative;
	outline: none;
	width: 100%;
	background: #FFF;
	line-height: 1.2;
	margin-left: 10px;
	align-items: center;	
	cursor: pointer;
}
.tabs .tab .tab-toggle .tab-nums  {
	padding: 0 10px 0 0;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 16px 0 0 16px;
}
.tabs .tab .tab-toggle .tab-nums .tab-num  {
	color: #337AB7;
	font-size: 18px;
	font-weight: bold;
	border-radius: 50%;
	background: #FFF;
	border: 3px solid #337AB7;
	width: 34px;
	height: 34px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-left: -20px;
	position: relative;
	z-index: 1;
}
.tabs .tab .tab-toggle .tab-nums .tab-tab  {
	padding: 0 12px 0 24px;
	margin-left: -20px;
	font-size: 13px;
	font-weight: bold;	
	border: 2px solid #BFE2FF;
	background: #BFE2FF;
	color: #337AB7;
	border-radius: 0 22px 22px 0;
	height: 34px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.tabs .tab .tab-toggle .tab-name {
	padding: 6px 0;
	text-align: left;
	text-transform: uppercase;
	font-size: 16px;
	font-weight: bold;	
}
.tabs .tab .tab-toggle:after {
	content: "";
	background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3e%3cpath fill='%23000000' d='M143 352.3L7 216.3c-9.4-9.4-9.4-24.6 0-33.9l22.6-22.6c9.4-9.4 24.6-9.4 33.9 0l96.4 96.4 96.4-96.4c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9l-136 136c-9.2 9.4-24.4 9.4-33.8 0z'/%3e%3c/svg%3e");
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
	position: absolute;
	width: 20px;
	height: 20px;
	display: block;
	right: 10px;
	top: 50%;
	transform: rotate(0deg) translateY(-50%);
}
.tabs .tab .tab-toggle.active {
	color: #000;
	background-color: white;
	cursor: default;
}
.tabs .tab .tab-toggle.active .tab-nums .tab-num  {
	color: #FFF;
	background: #337AB7;
}
.tabs .tab .tab-toggle.active .tab-nums .tab-tab  {
	border: 2px solid #337AB7;
	background: #337AB7;
	color: #FFF;
}
.tabs .tab .tab-toggle.active .tab-name  {
	color: #337AB7;
}
.tabs .tab .tab-toggle.active:after {
	background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3e%3cpath fill='%23337AB7' d='M143 352.3L7 216.3c-9.4-9.4-9.4-24.6 0-33.9l22.6-22.6c9.4-9.4 24.6-9.4 33.9 0l96.4 96.4 96.4-96.4c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9l-136 136c-9.2 9.4-24.4 9.4-33.8 0z'/%3e%3c/svg%3e");
}
.tabs .tab .tab-toggle.active:after {
	color: #8099c2;
	transform: rotate(180deg) translateY(50%);
}
.tabs .content {
	overflow: hidden;
	padding: 0;
	transition: opacity 0.4s;
	visibility: hidden;
	opacity: 0;
	padding: 0 0 10px 0;
	max-height: 0;
}
.tabs .content.active {
	max-height: 5000px;
	visibility: visible;
	opacity: 1;
}
@media screen and (min-width: 992px) {
	.tabs {
		position: relative;
		transition: all 0.5s;
	}
	.tabs .tab {
		float: left;
		clear: left;
		width: 30%;
	}
	.tabs .tab .tab-toggle {
		text-align: left;
	}
	.tabs .tab .tab-toggle:after {
		transform: rotate(-90deg) translateX(50%);
	}
	.tabs .tab .tab-toggle.active:after {
		transform: rotate(-90deg) translateX(50%) translateY(0);
	}
	.tabs .content {
		position: absolute;
		right: 0;
		top: 0;
		width: 70%;
		opacity: 0;
		padding: 0 0 30px 40px;
		transition: opacity 0.4s;
	}
	.tabs .content.active {
		opacity: 1;
		padding: 0 0 10px 40px;
	}
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

.tabs * {

box-sizing: border-box;

}

.tabs {

position: relative;

margin: 20px 10px;

}

.tabs:after{

display:table;

content:"";

clear:both;

}

.tabs .tab .tab-toggle {

display: flex;

border: 2px solid #BFE2FF;

padding: 4px 40px 4px 0;

border-radius: 16px;

margin-bottom: 8px;

position: relative;

outline: none;

width: 100%;

background: #FFF;

line-height: 1.2;

margin-left: 10px;

align-items: center;

cursor: pointer;

}

.tabs .tab .tab-toggle .tab-nums {

padding: 0 10px 0 0;

display: flex;

align-items: center;

justify-content: center;

border-radius: 16px 0 0 16px;

}

.tabs .tab .tab-toggle .tab-nums .tab-num {

color: #337AB7;

font-size: 18px;

font-weight: bold;

border-radius: 50%;

background: #FFF;

border: 3px solid #337AB7;

width: 34px;

height: 34px;

display: flex;

align-items: center;

justify-content: center;

margin-left: -20px;

position: relative;

z-index: 1;

}

.tabs .tab .tab-toggle .tab-nums .tab-tab {

padding: 0 12px 0 24px;

margin-left: -20px;

font-size: 13px;

font-weight: bold;

border: 2px solid #BFE2FF;

background: #BFE2FF;

color: #337AB7;

border-radius: 0 22px 22px 0;

height: 34px;

display: flex;

align-items: center;

justify-content: center;

}

.tabs .tab .tab-toggle .tab-name {

padding: 6px 0;

text-align: left;

text-transform: uppercase;

font-size: 16px;

font-weight: bold;

}

.tabs .tab .tab-toggle:after {

content: "";

background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3e%3cpath fill='%23000000' d='M143 352.3L7 216.3c-9.4-9.4-9.4-24.6 0-33.9l22.6-22.6c9.4-9.4 24.6-9.4 33.9 0l96.4 96.4 96.4-96.4c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9l-136 136c-9.2 9.4-24.4 9.4-33.8 0z'/%3e%3c/svg%3e");

background-repeat: no-repeat;

background-size: contain;

background-position: center;

position: absolute;

width: 20px;

height: 20px;

display: block;

right: 10px;

top: 50%;

transform: rotate(0deg) translateY(-50%);

}

.tabs .tab .tab-toggle.active {

color: #000;

background-color: white;

cursor: default;

}

.tabs .tab .tab-toggle.active .tab-nums .tab-num {

color: #FFF;

background: #337AB7;

}

.tabs .tab .tab-toggle.active .tab-nums .tab-tab {

border: 2px solid #337AB7;

background: #337AB7;

color: #FFF;

}

.tabs .tab .tab-toggle.active .tab-name {

color: #337AB7;

}

.tabs .tab .tab-toggle.active:after {

background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3e%3cpath fill='%23337AB7' d='M143 352.3L7 216.3c-9.4-9.4-9.4-24.6 0-33.9l22.6-22.6c9.4-9.4 24.6-9.4 33.9 0l96.4 96.4 96.4-96.4c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9l-136 136c-9.2 9.4-24.4 9.4-33.8 0z'/%3e%3c/svg%3e");

}

.tabs .tab .tab-toggle.active:after {

color: #8099c2;

transform: rotate(180deg) translateY(50%);

}

.tabs .content {

overflow: hidden;

padding: 0;

transition: opacity 0.4s;

visibility: hidden;

opacity: 0;

padding: 0 0 10px 0;

max-height: 0;

}

.tabs .content.active {

max-height: 5000px;

visibility: visible;

opacity: 1;

}

@media screen and (min-width: 992px) {

.tabs {

position: relative;

transition: all 0.5s;

}

.tabs .tab {

float: left;

clear: left;

width: 30%;

}

.tabs .tab .tab-toggle {

text-align: left;

}

.tabs .tab .tab-toggle:after {

transform: rotate(-90deg) translateX(50%);

}

.tabs .tab .tab-toggle.active:after {

transform: rotate(-90deg) translateX(50%) translateY(0);

}

.tabs .content {

position: absolute;

right: 0;

top: 0;

width: 70%;

opacity: 0;

padding: 0 0 30px 40px;

transition: opacity 0.4s;

}

.tabs .content.active {

opacity: 1;

padding: 0 0 10px 40px;

}

jQuery:

let wrapper = $(".tabs");
let tabToggle = wrapper.find(".tab-toggle");
function openTab() {
	let content = $(this).parent().next(".content"),
	activeItems = wrapper.find(".active");
	if ($(window).width() > 991) {
		if(!$(this).hasClass('active')) {
			$(this).add(content).add(activeItems).toggleClass('active');
			wrapper.css('min-height', content.outerHeight());
		}	
	} else {
		$(this).add(content).toggleClass('active');
	}	
};
tabToggle.on('click', openTab);
tabToggle.first().trigger('click');

let wrapper = $(".tabs");

let tabToggle = wrapper.find(".tab-toggle");

function openTab() {

let content = $(this).parent().next(".content"),

activeItems = wrapper.find(".active");

if ($(window).width() > 991) {

if(!$(this).hasClass('active')) {

$(this).add(content).add(activeItems).toggleClass('active');

wrapper.css('min-height', content.outerHeight());

}

} else {

$(this).add(content).toggleClass('active');

}

};

tabToggle.on('click', openTab);

tabToggle.first().trigger('click');

Обратите внимание: скрипт рассчитан на использование только одной секции с вкладками на странице.

Подписывайтесь на публикации Там наиболее интересные заметки без рекламы и другой ненужной информации.

Протестировать на смартфоне Открыть QR-код для перехода на эту страницу с телефона

Опубликовано: 02.02.2023 / Обновлено: 04.05.2025
Рубрики: Вкладки, блоки и списки, Меню и аккордеоны
Метки: CSS, jQuery
8604 просмотра

Смотрите также:

Капли воды на CSS

Капли воды для оформления фона блока или секции

Карточки в виде стикеров для заметок

Информационные карточки в виде стикеров со случайным углом наклона

Анимированный переход между пунктами меню

Три примера плавных анимированных переходов между пунктами меню на jQuery

Добавить комментарий:

Ваш комментарий отправлен!