Открытие двох блоков одной кнопкой

Тема в разделе "JavaScript", создана пользователем Amazko, 3 дек 2014.

Статус темы:
Закрыта.
Модераторы: ZiX
  1. Amazko

    Amazko Ловлю сливеров.

    Moderator
    Регистр.:
    4 мар 2012
    Сообщения:
    569
    Симпатии:
    309
    Здраствуйте. Я использую вот такой кусок кода для скрытия и открытия одного блока.
    PHP:
        <script type="text/javascript">
    function 
    testBlock() {
    var 
    obj document.getElementById('tBlock')
    if (
    obj.style.display == 'none') {
      
    obj.style.display 'block';
    }
    else {
      
    obj.style.display 'none';
    }
    }
    </script>
    ну естественно он мне по клику на ету ссылку :
    <a href="javascript:void(0)" onclick="testBlock()" ><div id="button-plus"><span>Добавки</span></div></a>
    открывает и закрывает вот етот блок:
    PHP:
    <div id="tBlock" style="display: none;">
    чтото там.
            </
    div>
    но мне надо к етой кнопке прикрутить еще один блок для скрытия и открытия, чтобы показывались и скрывались два блока одновременно которые находяться в разных частях кода. как это сделать?
     
  2. Q_BASIC

    Q_BASIC

    Регистр.:
    30 ноя 2013
    Сообщения:
    352
    Симпатии:
    223
    Лучше jQuery используйте:
    HTML:
    <a href="javascript:void(0)" onclick="$('#tBlock').toggle(); $('#tBlock2').toggle();" ><div id="button-plus"><span>Добавки</span></div></a>
    Ну а у Вас в функции допишите:
    Код:
    function testBlock() {
    var obj = document.getElementById('tBlock')
    if (obj.style.display == 'none') {
      obj.style.display = 'block';
    }
    else {
      obj.style.display = 'none';
    }
    obj = document.getElementById('tBlock2')
    if (obj.style.display == 'none') {
      obj.style.display = 'block';
    }
    else {
      obj.style.display = 'none';
    }
    }
    Или еще одну функцию создайте:
    HTML:
    <a href="javascript:void(0)" onclick="testBlock(); testBlock2()" ><div id="button-plus"><span>Добавки</span></div></a>
     
    Amazko нравится это.
  3. SocMaster

    SocMaster aka Hakerok

    Регистр.:
    26 июл 2011
    Сообщения:
    202
    Симпатии:
    47
    Код:
      <script type="text/javascript">
    function testBlock() {
        //block 1
        var obj = document.getElementById('tBlock')
        if (obj.style.display == 'none') {
            obj.style.display = 'block';
        }else {
            obj.style.display = 'none';
        }
        //block 2
        var tBlock2 = document.getElementById('tBlock2')
        if (tBlock2.style.display == 'none') {
            tBlock2.style.display = 'block';
        }else {
            tBlock2.style.display = 'none';
        }
    }
    </script>
    <div id="tBlock" style="display: none;"></div><div id="tBlock2" style="display: none;"></div>
     
    Amazko нравится это.
  4. Q_BASIC

    Q_BASIC

    Регистр.:
    30 ноя 2013
    Сообщения:
    352
    Симпатии:
    223
    Этот код не всегда работает как надо. Если display: none указано где-то отдельно, то функция определит у элемента display: block, и добавит элементу еще одно display: none. А заработает как надо со второго клика. В jQuery такого нет, там сразу всё ок
    Код:
    function testBlock() {
    var obj = document.getElementById('tBlock')
    if (obj.style.display == 'none') {
      obj.style.display = 'block';
    }
    else {
      obj.style.display = 'none';
    }
    obj = document.getElementById('tBlock2')
    if (obj.style.display == 'none') {
      obj.style.display = 'block';
    }
    else {
      obj.style.display = 'none';
    }
    }
    Работает:
    HTML:
    <div style="display: none;"></div>
    Не работает (заработает со второго клика)
    HTML:
    <style>
    #element {
             display: none;
    }
    </style>
    <div id="element">Element</div>
     
  5. Amazko

    Amazko Ловлю сливеров.

    Moderator
    Регистр.:
    4 мар 2012
    Сообщения:
    569
    Симпатии:
    309
    Оба варианта работают по первому клику.
    Ощутимой разницы нет.
    Вопрос исчерпан.
     
Статус темы:
Закрыта.