Хочу сделать сверху что то типо табов которые можно переключать и что бы показывали разную информацию в зависимости от активного таба, например таб с изображением телефона и что бы когда нажимаю выдвигался телефонный номер, тоже самое с почтой, и тд…
Буду очень благодарен если кто то скинет пример чего то подобного!
Нашел на codepen, немного переделал под вас:
<div class="common-tabs">
<ul class="common-tabs__menu">
<li class="common-tabs__item">
<a href="#tab-1" class="common-tabs__link">
<span class="common-tabs__label"> 380986401122
<svg class="common-tabs__icon" width="24" height="24" viewBox="0 0 24 24">
<path d="M17.25,18H6.75V4H17.25M14,21H10V20H14M16,1H8A3,3 0 0,0 5,4V20A3,3 0 0,0 8,23H16A3,3 0 0,0 19,20V4A3,3 0 0,0 16,1Z">
<li class="common-tabs__item">
<a href="#tab-2" class="common-tabs__link">
<span class="common-tabs__label">email@gmail.com
<svg class="common-tabs__icon" width="24" height="24" viewBox="0 0 24 24">
<path d="M4,4H20A2,2 0 0,1 22,6V18A2,2 0 0,1 20,20H4C2.89,20 2,19.1 2,18V6C2,4.89 2.89,4 4,4M12,11L20,6H4L12,11M4,18H20V8.37L12,13.36L4,8.37V18Z">
.common-tabs__menu {
display: flex;
margin-top: 0;
margin-bottom: 0;
padding-left: 0;
list-style: none;
border-bottom: 6px solid #f5f5f5;
background-color: gray;
}
.common-tabs__item {
flex-grow: 1;
}
.common-tabs__link {
display: flex;
justify-content: center;
align-items: center;
padding: 12px 20px;
font-weight: 400;
font-size: 16px;
line-height: 1.15;
text-decoration: none;
text-align: center;
color: #ffffff;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
transition: 0.5s;
}
.common-tabs__link:hover, .common-tabs__link:focus {
color: #4dd0e1;
background-color: rgba(0, 0, 0, 0.1);
}
.active .common-tabs__link {
color: #caa96e;
background-color: rgba(0, 0, 0, 0.2);
}
@media (min-width: 568px) {
.common-tabs__link {
font-size: 18px;
}
}
.common-tabs__label {
display: block;
max-width: 0;
overflow: hidden;
transition: 0.5s;
white-space: nowrap;
color: #ffffff;
}
.active .common-tabs__label {
max-width: 100px;
margin-right: 5px;
padding-right: 50px;
}
.common-tabs__icon {
width: 64px;
height: 64px;
flex-shrink: 0;
fill: currentColor;
}