Форум

SLameN · #1 (**permalink**) 21.07.2014, 08:21

Имеется штук 50 таких спойлеров

<div class="spoiler">
<input onclick="showSpoiler(this);" value="Название кнопки" type="button" id="button" />
<div class="inner" style="display: none;">
скрытый текст
</div>
</div>

function showSpoiler(obj) {var inner = obj.parentNode.getElementsByTagName("div")[0]; if (inner.style.display == "none") inner.style.display = ""; else inner.style.display = "none"; }

А теперь вопрос, нужно сделать кнопку, по которой будут открываться все div, т.е. убираться display: none

рони · #2 (**permalink**) 21.07.2014, 08:37

SLameN,
сделать цикл который обходит все div

Aetae · #3 (**permalink**) 21.07.2014, 09:03

Ультимативно:

<div class="inner" style="display: none;">
скрытый текст
</div>
<input type="button" onclick="
    document.body.appendChild(document.createElement('style')).innerHTML = '.inner{display:block !important}'; 
" value="show all"/>

SLameN · #4 (**permalink**) 21.07.2014, 09:21

Спасибо, работает, только если я потом начинаю скрывать блоки ненужные, они не скрываются...

Можно ли не добавлять к class="inner" display:block, а в этом диве делать style.display = "". Чтобы потом можно было скрыть или опять открыть

Rise · #5 (**permalink**) 21.07.2014, 09:36

SLameN,

<div class="spoiler">
    <input onclick="showSpoiler(this)" value="Название кнопки" type="button" name="btn" />
    <div class="inner" style="display: none;">скрытый текст</div>
</div>
<div class="spoiler">
    <input onclick="showSpoiler(this)" value="Название кнопки" type="button" name="btn" />
    <div class="inner" style="display: none;">скрытый текст</div>
</div>

<input onclick="showSpoilerAll()" value="Все" type="button" />

<script>
function showSpoiler(obj) {
    var inner = obj.parentNode.getElementsByTagName("div")[0];
    if (inner.style.display == "none") inner.style.display = "";
    else inner.style.display = "none";
}
function showSpoilerAll() {
    var btns = document.getElementsByName("btn");
    for(var i = 0; i < btns.length; i++) btns[i].onclick();
}
</script>

рони · #6 (**permalink**) 21.07.2014, 09:42

SLameN,

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
    .inner{
      display: none;
    }
   .show .inner{
      display:  block;
    }
  </style>

</head>

<body>
<input type="button" onclick="document.body.classList.toggle('show')" value="show/hide all"/>
<div class="inner" >
скрытый текст
</div>
<div class="inner" >
скрытый текст
</div>
<div class="inner" >
скрытый текст
</div>
</body>

</html>

SLameN · #7 (**permalink**) 21.07.2014, 10:09

Большое спасибо!

Форум

Справочник

Discord чат

Курсы javascript