<div class="tabs">
<div class="tabs__buttons">
<div class="tabs__button" data-text="1">Таб 1</div>
<div class="tabs__button" data-text="2">Таб 2</div>
<div class="tabs__button" data-text="3">Таб 3</div>
</div>
</div>
<div class="tabs__content">
<div class="tabs__content-text data-text-1">Привет</div>
<div class="tabs__content-text data-text-2">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas aut necessitatibus soluta, ex nam, natus odit laborum assumenda mollitia earum corrupti quis quia dignissimos. Officiis enim explicabo facere hic harum.</div>
<div class="tabs__content-text data-text-3">Lorem ipsum dolor sit amet consectetur adipisicing elit. Iste dolore, ipsum assumenda veniam ullam nesciunt veritatis quia, et eveniet placeat, ipsa corporis culpa odit itaque deleniti explicabo sunt in alias?</div>
</div>
</div>
body {
background: #323232;
font-family: arial;
}
.tabs {
color: white;
}
.tabs__buttons {
display: flex;
justify-content: flex-start;
}
.tabs__button {
cursor: pointer;
padding: 5px 8px;
}
.tabs__button:nth-child(1) {
background-color: red;
}
.tabs__button:nth-child(2) {
background-color: green;
}
.tabs__button:nth-child(3) {
background-color: blue;
}
.tabs__content {
max-width: 300px;
}
.tabs__content-text:nth-child(1) {
height: 0px;
overflow: auto;
transition: all 0.3s ease-in;
background-color: red;
}
.tabs__content-text:nth-child(1).active {
height: 150px;
}
.tabs__content-text:nth-child(2) {
height: 0px;
overflow: auto;
transition: all 0.3s ease-in;
background-color: green;
}
.tabs__content-text:nth-child(2).active {
height: 150px;
}
.tabs__content-text:nth-child(3) {
height: 0px;
overflow: auto;
transition: all 0.3s ease-in;
background-color: blue;
}
.tabs__content-text:nth-child(3).active {
height: 150px;
}
const buttons = document.querySelectorAll(".tabs__button")
buttons.forEach(el => {
el.addEventListener('click', ev => {
const content = document.querySelectorAll(".tabs__content-text")
const target = ev.target
const clicked = document.querySelector(`.data-text-${target.dataset.text}`)
if (clicked.classList.contains("active")) {
content.forEach(item => item.classList.remove("active"))
} else {
content.forEach(item => item.classList.remove("active"))
clicked.classList.add("active")
}
})
})
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.