Форум

danik.js · #11 (**permalink**) 21.12.2013, 19:09

Улучшенный вариант (без дополнительных классов)

<head>
    <style>
      .link {
        border:none;
        background-color: transparent;
        text-decoration: underline;
        color: #476C8E;
        display: block;
        outline: none;
        cursor: pointer;
      }
      .sp-text {
        display: none;
        border: 1px solid #d5d5d5;
        background-color: #f5f5f5;
        padding: 5px;
      }
    </style>
    <script>
      var spoiler = function (el) {
          var sptext = el.nextElementSibling || (function() {
                do { el = el.nextSibling } while ( el && el.nodeType !== 1 );
                return el;
          })(el);
          if (sptext.style.display == "") {
            sptext.style.display = "block";
            el.value = "Закрыть";
          } else {
            sptext.style.display = "";
            el.value = "Показать решение";
          }
        };
    </script>
  </head>
   
  <body>
    <input type="button" onclick="spoiler(this)" value="Показать решение" class="link">
    <div class="sp-text">Ваш текст ...</div>
    <input type="button" onclick="spoiler(this)" value="Показать решение" class="link">
    <div class="sp-text">Ваш текст ...</div>
  </body>

Костыль для nextElementSibling нужен для IE8

sport-chess · #12 (**permalink**) 21.12.2013, 19:55

При нажатии не реагирует ссссс...ка. Вот пример:
http://chessclub.host22.com/raznoe/p...-spojller.html

sport-chess · #13 (**permalink**) 21.12.2013, 19:58

Что не так здесь? Тоже не работает...


<script language="javascript">
function toggle() {
var ele = document.getElementById("toggleText");
var text = document.getElementById("displayText");
if(ele.style.display == "block") {
ele.style.display = "none";
text.innerHTML = "Показать решение";
}
else {
ele.style.display = "block";
text.innerHTML = "Закрыть";
}
}
</script>

1)
<a href="javascript:toggle(1);" id="displayText1">Показать решение</a>
<div id="toggleText" style="display: none;">Сам текст в спойлере... </div>

2)

<a href="javascript:toggle(2);" id="displayText2">Показать решение</a>
<div id="toggleText" style="display: none;">Сам текст в спойлере... </div>

danik.js · #14 (**permalink**) 21.12.2013, 20:16

Сообщение от sport-chess

При нажатии не реагирует ссссс...ка. Вот пример:

Предполагается что скрытый блок идет следом за кнопкой. То есть убери обертку <p> .. </p>

Rise · #15 (**permalink**) 21.12.2013, 20:18

Сообщение от sport-chess

Что не так здесь? Тоже не работает..

<script>
	function toggle(i) {
		var ele = document.getElementById("toggleText" + i);
		var text = document.getElementById("displayText" + i);
		if (ele.style.display == "block") {
			ele.style.display = "none";
			text.innerHTML = "Показать решение";
		} else {
			ele.style.display = "block";
			text.innerHTML = "Закрыть";
		}
	}
</script>

<a href="javascript:toggle(1);" id="displayText1">Показать решение</a>
<div id="toggleText1" style="display: none;">Сам текст в спойлере...</div>

<a href="javascript:toggle(2);" id="displayText2">Показать решение</a>
<div id="toggleText2" style="display: none;">Сам текст в спойлере...</div>

sport-chess · #16 (**permalink**) 21.12.2013, 20:22

текст в редакторе:

Тест на работу ссс.

Рабочий вариант, который нужно просто вставить в то место, где нужно отобразить кнопку.

<input class="link" onclick="spoiler(this)" type="button" value="Показать решение" />
<div class="sp-text">Ваш текст ...</div>
<input class="link" onclick="spoiler(this)" type="button" value="Показать решение" />
<div class="sp-text">Ваш текст ...</div>

что убрать?

danik.js · #17 (**permalink**) 21.12.2013, 20:25

Редактор сам добавляет значит теги <p></p>

sport-chess · #18 (**permalink**) 21.12.2013, 20:32

Rise - ГЕНИЙ!
Ребята, за помощь всем +.
Тема, благодаря человеку под ником Rise, закрыта.

Форум

Справочник

Discord чат

Курсы javascript