Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Убрать display = "none" (https://javascript.ru/forum/dom-window/48889-ubrat-display-%3D-none.html)

SLameN 21.07.2014 08:21
Убрать display = "none"
 
Имеется штук 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

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

Aetae 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 21.07.2014 09:21
Спасибо, работает, только если я потом начинаю скрывать блоки ненужные, они не скрываются...

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

Rise 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>

рони 21.07.2014 09:42
SLameN,
:write: 
<!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 21.07.2014 10:09
Большое спасибо!


Часовой пояс GMT +3, время: 00:02.