Это простые рабочие вкладки, которые выставил под темный дизайн, где созданы при помощи JS и стилистике CSS. Где в стилях веб мастер может сам настроить тот дизайн оттенка, который более будет подходит под основу сайта. При работе занимает мало место, в чем их плюс, так как в них можно содержать много информации. А точнее выстроить по разделам, где пользователи и гости сайта по клику могут открыть тот, который им нужен.
При просмотре на работоспособность всех функций проверены на demo странице:
Приступаем к установке:
HTML
Код
[code]<div class="knowing-nderlyin">ZorNet.Ru - портал для вебмастера</div>
<div class="createblocus">
<p class='morecontrol'>Описание №1</p>
</div>
<div class="knowing-nderlyin">ZorNet.Ru - портал для вебмастера 2</div>
<div class="createblocus">
<p class='morecontrol'>Описание №2</p>
</div>
CSS
Код
.knowing-nderlyin {
background-color: #383636;
padding: 18px;
border-bottom: 1px solid #656363;
cursor: pointer;
font-size: 15px;
font-weight: bold;
color: #f7f6f6;
}
.createblocus {
overflow: hidden;
max-height: 0;
transition: max-height 1s linear;
}
.morecontrol {
background-color: #462390;
color: #ffffff;
}
.continuousel {
max-height: 100%;
}
JS
Код
document.addEventListener('click', (e) => {
if (e.target.classList.contains('knowing-nderlyin')) { e.target.nextElementSibling.classList.toggle('continuousel');
}
})
Также вы можете создавать вкладки сколько вам угодно, а не то количество, что идут по умолчанию.
На демонстраций идет светлый оттенок, здесь в материале, тот что на изображение.
Демонстрация
