Здравствуйте ребята.
Мучаюсь уже неделю.
подскажите пожалуйста какой ни-будь скрипт для плавного закрытие div, уже много чего перепробовал но не получается
Сам код
CSS
.content {
padding-left: 16px;
padding-top: 25px;
padding-bottom: 25px;
display: contents;
}
.wiki-nav {
display: inline-block;
margin: 0;
padding: 0;
float: left;
//border: solid #00acde;
}
.wiki_nav {
display: inline-block;
margin: 0;
padding: 0;
float: left;
//border: solid #00acde;
}
.wiki-nav-button{
align-items: center;
padding: 8px 24px;
margin-right: 5px;
width: 220px;
height: 44px;
border: 1px solid rgba(255, 255, 255, 0.1);
margin-bottom: 16px;
}
.block-container {
display: flex;
width: auto;
height: 1010px;
}
.right{
float: right;
}
.button {
margin-right: 6px;
}
.p-body-pageContent{
overflow: hidden;
padding: 20px 0;
}
.item{
height: 32px;
width: 32px;
margin-right: 12px;
background-color: white;
display: inline-block;
}
.items{
margin-left: 35px;
margin-top: 24px;
margin-right: 89px;
}
.items-header{
margin-left: 35px;
font-style: normal;
font-weight: 700;
font-size: 24px;
display: flex;
align-items: center;
color: #FFFFFF;
}
<div class="arrow-left"><svg class="close" width="26" height="20" viewBox="0 0 26 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M2 10L1.29289 9.29289L0.585786 10L1.29289 10.7071L2 10ZM24.5 11C25.0523 11 25.5 10.5523 25.5 10C25.5 9.44771 25.0523 9 24.5 9V11ZM10.2929 0.292893L1.29289 9.29289L2.70711 10.7071L11.7071 1.70711L10.2929 0.292893ZM1.29289 10.7071L10.2929 19.7071L11.7071 18.2929L2.70711 9.29289L1.29289 10.7071ZM2 11H24.5V9H2V11Z" fill="#CCD2E3"/>
</svg>
</div>
<div class="p-body-pageContent">
<div class="wiki-nav">
<div class="wiki-nav-button">Блоки</div>
<div class="wiki-nav-button">Предметы</div>
<div class="wiki-nav-button">Профессии</div>
<div class="wiki-nav-button">Расы</div>
<div class="wiki-nav-button">Мобы</div>
<div class="wiki-nav-button">NPC</div>
<div class="wiki-nav-button">Эффекты</div>
<div class="wiki-nav-button">Структуры</div>
<div class="wiki-nav-button">Metacoin</div>
<div class="wiki-nav-button">Зоны</div>
<div class="wiki-nav-button">Планеты</div>
<div class="wiki-nav-button">Чат</div>
<div class="wiki-nav-button">Группы</div>
<div class="wiki-nav-button">Клан</div>
<div class="wiki-nav-button">Кодекс</div>
<div class="wiki-nav-button">Настройки аккаунта</div>
<div class="wiki-nav-button">FAQ</div>
</div><div class="wiki_nav" id="subMenu">
<div class="wiki-nav-button">Ландшафт</div>
<div class="wiki-nav-button">Руды</div>
<div class="wiki-nav-button">Дерево</div>
<div class="wiki-nav-button">Стекло</div>
<div class="wiki-nav-button">Механизмы</div>
<div class="wiki-nav-button">Песчаник</div>
<div class="wiki-nav-button">Камень</div>
<div class="wiki-nav-button">Ядерная энергетика</div>
<div class="wiki-nav-button">Жидкости</div>
<div class="wiki-nav-button">Источники света</div>
<div class="wiki-nav-button">Растения</div>
<div class="wiki-nav-button">Адские блоки</div>
</div><div class="content">
<div class="block-container" id="container">
<div class="block-body" id="body">
<p class="items-header">Общее</p>
<div class="items">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
</div>
</div>
<div class="wiki_less">
<a href="/xf/index.php?wiki/add" class="right button rippleButton" style="margin-right: 19px;"><span class="button-text">
Wiki Add
</span></a>
<a href="/xf/index.php?wiki/editor" class="right button rippleButton"><span class="button-text">
Wiki Editor
</span></a>
</div>
</div>
</div>
Вот как выглядит это на локальном сервере.

изначально 2 остальных блока скрыты, но при нажатии к примеру на раздел “Блоки ” 1 блок скрывается, и открывается второй блок

и опять же при нажатии на вкладку " ландшафты" скрывается 2 див, и открывается третий
и соответственно его содержимое

Теперь при нажатии на стрелку

будет закрываться 3 див но открываться второй,

и так далее в обратом порядке, не получается реализовать, помогите пожалуйста.
Менять классы не желательно