Js скрипт "скрыть показать элемент"
Здравствуйте ребята.
Мучаюсь уже неделю. подскажите пожалуйста какой ни-будь скрипт для плавного закрытие 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 див но открываться второй, и так далее в обратом порядке, не получается реализовать, помогите пожалуйста. Менять классы не желательно |
Часовой пояс GMT +3, время: 18:36. |