Улучшенный вариант (без дополнительных классов)
<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 |
При нажатии не реагирует ссссс...ка. Вот пример:
http://chessclub.host22.com/raznoe/p...-spojller.html |
Что не так здесь? Тоже не работает...
<!-- код спойллера --> <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> |
Цитата:
|
текст в редакторе:
Тест на работу ссс. Рабочий вариант, который нужно просто вставить в то место, где нужно отобразить кнопку. <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> что убрать? |
Редактор сам добавляет значит теги <p></p>
|
Rise - ГЕНИЙ!
Ребята, за помощь всем +. Тема, благодаря человеку под ником Rise, закрыта. |
| Часовой пояс GMT +3, время: 03:14. |