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

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

Кроме этого, каждая вкладка в данном решении имеет одинаковый 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 / Обновлено: 08.05.2024
Рубрики: Вкладки, блоки и списки, Меню и аккордеоны
Метки: CSS, jQuery
6593 просмотра

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

Боковое меню с иконками на CSS

Фиксированное боковое меню с иконками и выдвигающимися подсказками на CSS

Анимированные SVG-линии

Плагин ckLine.js для создания анимированных SVG-линий с помощью jQuery

Настраиваемое контекстное меню на элементе

Настраиваемое меню вызываемое правой кнопки мыши на заданном элементе

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

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