Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 23.08.2022, 02:40
Новичок на форуме
Отправить личное сообщение для intertools Посмотреть профиль Найти все сообщения от intertools
 
Регистрация: 23.08.2022
Сообщений: 1

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 див но открываться второй,

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

Последний раз редактировалось intertools, 23.08.2022 в 03:11.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
JS показать остальные фотографии Ivanus Общие вопросы Javascript 1 14.07.2010 14:11
Вызвать из JS ASP скрипт AlienK Общие вопросы Javascript 1 04.03.2010 12:28
Скрипт JS Авто-Кликера SaT31ReG Работа 5 10.01.2010 22:22
[Ищу] Скрипт JS кликера SaT31ReG Оффтопик 4 10.01.2010 20:34
как привязать ссылку с Html страницы на вынесенный в отдельную папку js скрипт? TIIIMOXAN Общие вопросы Javascript 2 09.11.2009 19:23