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

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;
	transition: opacity 0.4s;
	visibility: hidden;
	opacity: 0;
	padding: 0;
	max-height: 0;
}
.tabs .content.active {
	max-height: 5000px;
	visibility: visible;
	opacity: 1;
	padding: 10px 0;
}
@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;
		transition: opacity 0.4s;
	}
	.tabs .content.active {
		opacity: 1;
		padding: 0 0 0 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;

transition: opacity 0.4s;

visibility: hidden;

opacity: 0;

padding: 0;

max-height: 0;

}

.tabs .content.active {

max-height: 5000px;

visibility: visible;

opacity: 1;

padding: 10px 0;

}

@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;

transition: opacity 0.4s;

}

.tabs .content.active {

opacity: 1;

padding: 0 0 0 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');

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

Пример:

HTML:

CSS:

jQuery:

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

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