Показать/скрыть элементы div по одному и все сразу

Я использую это, чтобы показать/скрыть некоторые div, в конце у меня есть кнопка, чтобы показать div один за другим.

Как я могу иметь вторую кнопку, чтобы показать/скрыть их все сразу, не слишком возясь с HTML?

В основном каждый div содержит поле ввода, поэтому пользователь нажимает кнопку «Добавить еще», чтобы получить дополнительное поле. По умолчанию все поля скрыты, поэтому мне нужна кнопка, чтобы показать их все сразу (у меня есть 14 разделов, которые нужно показать/скрыть).

Любая помощь будет оценена.

JavaScript

var counter = 0;
var numBoxes = 3;
function toggle4(showHideDiv) {
       var ele = document.getElementById(showHideDiv + counter);
       if(ele.style.display == "block") {
              ele.style.display = "none";
       }
       else {
              ele.style.display = "block";
       }
       if(counter == numBoxes) {
                document.getElementById("toggleButton").style.display = "none";
       }
}

HTML

<table>
   <tr>
      <td style="width: 150px;">
         <div id="box1" style="display: none;">First</div>
      </td>
      <td style="width: 150px;">
         <div id="box2" style="display: none;">Second</div
      </td>
      <td style="width: 150px;">
         <div id="box3" style="display: none;">Third</div
      </td>
   </tr>
</table>
<input id="toggleButton" type="button" value="Add one more!" onclick="counter++; toggle4('box');">

javascript togglebutton toggle
person user983248    schedule 18.04.2012    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Вот базовая функциональность, хотя она нуждается в некоторой доработке:

var d = document,
    table = d.getElementsByTagName('table')[0],
    divs = table.getElementsByTagName('div'),
    toggle = d.getElementById('toggleButton'),
    allToggle = d.getElementById('allToggle'),
    count = 0;

function toggles(){    
    var elem = divs[count];
    elem.style.display = 'block';

    count++;
}

toggle.onclick = function(){
    toggles();
};

allToggle.onclick = function(){
    if (allToggle.getAttribute('data-show') == 1){
        for(var i=0,len=divs.length;i<len;i++){
            divs[i].style.display = 'none';
            allToggle.setAttribute('data-show',0);
            allToggle.value = 'Show all';
        }
    }
    else {
        for(var i=0,len=divs.length;i<len;i++){
            divs[i].style.display = 'block';
            allToggle.setAttribute('data-show',1);
            allToggle.value = 'Hide all';
        }
    }
}
​

демонстрация JS Fiddle.

Вышеизложенное основано на следующем HTML:

<table>
   <tr>
      <td style="width: 150px;">
         <div id="box1" style="display: none;">First</div>
      </td>
      <td style="width: 150px;">
         <div id="box2" style="display: none;">Second</div>
      </td>
      <td style="width: 150px;">
         <div id="box3" style="display: none;">Third</div>
      </td>
   </tr>
</table>
<input id="toggleButton" type="button" value="Add one more!" />
<input id="allToggle" type="button" value="Show all" />​
person David says reinstate Monica    schedule 18.04.2012
comment
Странный; Могу поклясться, что выложил рабочую версию. Прости за это! Обновлен действительно работающим кодом и демонстрацией. знак равно - person David says reinstate Monica; 19.04.2012
comment
Извините, но ваш Добавить еще один! просто показывает один, и если вы нажмете еще раз, он скроет предыдущий и покажет следующий, я пытаюсь добавить еще один! - это означает, что если я нажму кнопку, я покажу следующий div, но с сохранением предыдущего (он останется видимым). Ваша последняя демонстрация работает идеально, но не так, как ожидалось. - person user983248; 19.04.2012
comment
Да неужели? Ах. Я подумал, что это упущение с вашей стороны, извините. Дайте мне минуту или две, и это будет удалено! =) Отредактировано, ближе? - person David says reinstate Monica; 19.04.2012
comment
Рад это слышать! И, честно говоря, вам очень рады; Рад, что был полезен =) - person David says reinstate Monica; 19.04.2012
comment
Обновление: не работает на wordpress (со стороны администратора) причина: неизвестна - в любом случае спасибо - person user983248; 19.04.2012
comment
Как правило, более удобно переключаться между 'none' и '' (пустая строка), чтобы видимые элементы принимали свое значение по умолчанию или унаследованное отображение, а не устанавливались на возможно неподходящее значение. - person RobG; 19.04.2012

arrow_upward
0
arrow_downward

есть кнопка с функцией, которая выбирает все div по классу (который вам нужно будет добавить) и скрывает/показывает их. Если вам нужна только одна кнопка, вам придется запомнить свое состояние, что в приведенном ниже примере я делаю с глобальным.

<button id="showhideall">

$(document).ready(function(){

var allshowing = true;

$("#showhideall").click(function(){
    alert(allshowing);
    if(allshowing){
        $(".foo").hide();
        allshowing=false;            
    } else {
        $(".foo").show();
    }
});
}​);​
person Colleen    schedule 18.04.2012
comment
Йхеа! это звучит как решение, но можете ли вы привести пример? - person user983248; 19.04.2012
comment
Можете ли вы немного подробнее объяснить свой код. Где box1, box2 и box3 включены в ваш код? - person user983248; 19.04.2012
comment
@ColleenColleen, я думаю, вы должны дать понять, что не используете чистый JavaScript. Другие люди должны знать, что им нужно будет использовать JQuery, чтобы это работало. - person Christian; 19.04.2012
comment
@Christian У меня была такая мысль, но я отбросил ее... думаю, мне не стоило :) Спасибо, что указали на это! OP, html такой, какой он у вас есть, за исключением того, что вам нужно добавить класс foo к каждому из ваших div и добавить кнопку. - person Colleen; 19.04.2012