Форум программистов
 

Восстановите пароль или Зарегистрируйтесь на форуме, о проблемах и с заказом рекламы пишите сюда - alarforum@yandex.ru, проверяйте папку спам!

Вернуться   Форум программистов > Web программирование > JavaScript, Ajax
Регистрация

Восстановить пароль
Повторная активизация e-mail

Купить рекламу на форуме - 42 тыс руб за месяц

Ответ
 
Опции темы Поиск в этой теме
Старый 20.12.2019, 16:34   #1
Vovan6996
 
Регистрация: 28.06.2011
Сообщений: 6
По умолчанию Открыть закрыть несколько divов

Здравствуйте. Имеется код.
Код:
<script type="text/javascript">
var show;
function viewdiv(id){
param=document.getElementById(id);
if(param.style.display == "none") {
if(show) show.style.display = "none";
param.style.display = "block";
show = param;
}else param.style.display = "none"
}
</script>





<div>
<a href="javascript:void(0);" onclick="viewdiv('mydiv');"> блок 1</a>
<div>
<a href="javascript:void(0);" onclick="viewdiv('mydiv2');"> блок 2</a>
<div>
<a href="javascript:void(0);" onclick="viewdiv('mydiv3');"> блок</a>

<div>
<a href="javascript:void(0);" onclick="viewdiv('mydiv');viewdiv('mydiv2');"> VSE </a>


<div id="mydiv" style="display:none;"> text 1</div>
<div id="mydiv2" style="display:none;"> text 2</div>
<div id="mydiv3" style="display:none;"> tЕЕ</div>

Нужно. Что бы при нажатие на кнопку vse открывался первый и второй div. (на данный момент он открывает последний)
Самое главное что бы при этом сохранилось закрывание старых div-ов

https://jsfiddle.net/Vovan6996/p75L064r/19
Vovan6996 вне форума Ответить с цитированием
Старый 15.01.2020, 15:05   #2
pompiduskus
юзер как все
Участник клуба
 
Аватар для pompiduskus
 
Регистрация: 10.01.2012
Сообщений: 1,586
По умолчанию

вот так можно, как вариант.

Код:
<!DOCTYPE html>
<html lang="en">
<head>
  <title>test</title>
  <meta charset="utf-8"/>

  <style type="text/css">

    html, body{
      padding: 20px; margin: 0; text-align: center;
    }

    .my-div-wrapper{
      display: inline-block; text-align: center; box-shadow: 0 0 2px #00F; vertical-align: top; padding: 5px;
    }

    .my-button{
      display: block; margin: 0 auto;
    }

    .my-div{
      transition: all 0.5s;
      display: block; margin: 5px auto; vertical-align: top; 
      width: 200px; height: 0; overflow: hidden; box-shadow: 0 0 2px #333;
    }
  </style>


  <script type="text/javascript">

    function ctrl(_id, cmd=false) {

      let elem = document.querySelector(_id);

      if( !elem ){

        if( !cmd ) return;

        const state = cmd === 'open' ? 'open' : 'closed';
        const height = cmd === 'open' ? '200px' : '0px';

        document.querySelectorAll('.my-div').forEach((elem)=>{
          elem.setAttribute('data-state', state );
          elem.style.height = height;
        });

        return;
      }

      if( elem.getAttribute('data-state') === 'open' ){
        elem.setAttribute('data-state','closed');
        elem.style.height = '0px';

      }else{
        elem.setAttribute('data-state','open');
        elem.style.height = '200px';
      }

    }

  </script>

</head>
<body>

  <button onclick="ctrl(false, 'open')">All::open</button>
  <button onclick="ctrl(false, 'close')">All::close</button>

  <hr/>

  <div class="my-div-wrapper">
    <button class="my-button" onclick="ctrl('#_0')">click</button>
    <div id="_0" class="my-div" data-state="closed"></div>  
  </div>

  <div class="my-div-wrapper">
    <button class="my-button" onclick="ctrl('#_1')">click</button>
    <div id="_1" class="my-div" data-state="closed"></div>  
  </div>

  <div class="my-div-wrapper">
    <button class="my-button" onclick="ctrl('#_2')">click</button>
    <div id="_2" class="my-div" data-state="closed"></div>  
  </div>

  <div class="my-div-wrapper">
    <button class="my-button" onclick="ctrl('#_3')">click</button>
    <div id="_3" class="my-div" data-state="closed"></div>  
  </div>

</body>
</html>
<Дзен - Вся вселенная в тебе > | Резюме: https://ch3ll0v3k.github.io/CV/
pompiduskus вне форума Ответить с цитированием
Ответ


Купить рекламу на форуме - 42 тыс руб за месяц

Опции темы Поиск в этой теме
Поиск в этой теме:

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
1) как перетащить несколько модулей с одной книги на другую одним скопом? 2)можно ли открыть несколько книг сразу? БАХТИ Microsoft Office Excel 17 26.09.2011 18:11
как динамически открыть и закрыть несколько окон? voverrr Общие вопросы Delphi 16 07.09.2011 21:28
код в с++ вин апи. как открыть/закрыть дисковод? ромик0 Общие вопросы C/C++ 1 25.05.2011 09:48
Закрыть и открыть форму Swatch Microsoft Office Access 1 31.05.2010 23:04
Закрыть открыть книгу segail Microsoft Office Excel 14 07.10.2009 18:22