Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Вывод функции Javascript в отдельном посте с помощью тега <div> (https://javascript.ru/forum/misc/43803-vyvod-funkcii-javascript-v-otdelnom-poste-s-pomoshhyu-tega-div.html)

sport-chess 21.12.2013 13:18
Вывод функции Javascript в отдельном посте с помощью тега <div>
 
Здравствуйте уважаемые форумчане!
Нужна ваша помощь. В блоге на вордпресс хочу сделать спойлер с помощью:

<!-- код спойлера -->

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

В статье:

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

Все работает при добавлении 1 спойлера в записи, мне нужно сделать 10.
Подскажите пожалуйста КАК?
Спасибо.

danik.js 21.12.2013 15:30
Цитата:
Сообщение от sport-chess
<script language="javascript">
Атрибут language бесполезен на 100%. Его не нужно писать.

В теме скорей всего подключена либа jQuery, с ней код поудобней писать:

<a class="displayText">Показать решение</a>
<div class="toggleText" style="display:none">Сам текст в спойлере... </div>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
    $('.displayText').click(function() { toggle(this) });
    function toggle(displayText) {
        displayText = $(displayText);
        var toggleText = displayText.next('.toggleText');
        if (toggleText.is(':visible')) {
            toggleText.hide();
            displayText.html('Показать решение');
        } else {
            toggleText.show();
            displayText.html('Закрыть');
        }
    }
</script>


jQuery конечно второй экземпляр подключать не нужно. Если эта либа не используется - можно без особых проблем переписать на чистом js.

sport-chess 21.12.2013 15:53
danik.js, спасибо за ответ, но может Вы знаете как расшифровать:
Цитата:
можно использовать несколько раз, меняя id в div'е
Как это реализовать?

danik.js 21.12.2013 16:16
Цитата:
Сообщение от sport-chess
Как это реализовать?
Расставлять уникальные айдишники displayText-1, displayText-2 и тд. И передавать номер в toggle(1), toggle(2). Но это геморно все. Проще вобще обойтись без айдишников всяких (как в моем примере).

sport-chess 21.12.2013 16:39
+1 . Иду пробовать.

Vlasenko Fedor 21.12.2013 16:45
Демонстрация возможности
http://learn.javascript.ru/play/6uFHuc

sport-chess 21.12.2013 17:13
Что не так?

<!-- код спойллера -->
<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>


Цитата:
<a class="displayText">Показать решение</a>
02 <div class="toggleText" style="display:none">Сам текст в спойлере... </div>
03 <script src="http://code.jquery.com/jquery-latest.min.js"></script>
04 <script>
05 $('.displayText').click(function() { toggle(this) });
06 function toggle(displayText) {
07 displayText = $(displayText);
08 var toggleText = displayText.next('.toggleText');
09 if (toggleText.is(':visible')) {
10 toggleText.hide();
11 displayText.html('Показать решение');
12 } else {
13 toggleText.show();
14 displayText.html('Закрыть');
15 }
16 }
17 </script>
Тоже не фурычит...

sport-chess 21.12.2013 17:18
Poznakomlus, спасибо за ответ.
А как сделать "Посмотреть ответ", чтоб отображалось ссылкой. И куда вставлять
<style>
.spoiler>input {
position: absolute;
top: -9999px;
left: -9999px;
}
.spoiler>label {
cursor: pointer;
}
.spoiler>label:before {
content:"Показать решение";
}
.spoiler>input:checked ~ label:before {
content:"Закрыть";
}
.spoiler>input:checked ~ .sp-content {
display: block;
}
.spoiler>.sp-content {
display: none;
border: 1px solid #d5d5d5;
background-color: #f5f5f5;
padding: 5px;
}
</style>

И этот код
<div class="spoiler">
<input type="checkbox" id="sp1" />
<label for="sp1"></label>
<div class="sp-content">Здесь будет наш текст...</div>
</div>
<div class="spoiler">
<input type="checkbox" id="sp2" />
<label for="sp2"></label>
<div class="sp-content">Здесь будет наш текст...</div>
</div>

Спасибо.

sport-chess 21.12.2013 18:39
Цитата:
Куда вставлять
уже разобрался. Как сделать, чтоб не прыгала страница вверх, при нажатии на "Показать решение"

Vlasenko Fedor 21.12.2013 18:42
http://learn.javascript.ru/play/No5aAb
смотрите решение на js второе
<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>
  </head>
  
  <body>
    <input type="button" onclick="spoiler(this)" value="Показать решение" class="link sp1">
    <div class="sp-text sp1">Ваш текст ...</div>
    <input type="button" onclick="spoiler(this)" value="Показать решение" class="link sp2">
    <div class="sp-text sp2">Ваш текст ...</div>
    <script>
      var spoiler = function (el) {
          var divCls = "div.sp-text." + el.className.split("link ")[1],
            sptext = document.querySelector(divCls);
          if (sptext.style.display == "") {
            sptext.style.display = "block";
            el.value = "Закрыть";
          } else {
            sptext.style.display = "";
            el.value = "Показать решение";
          }
        };
    </script>
  </body>

danik.js 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 21.12.2013 19:55
При нажатии не реагирует ссссс...ка. Вот пример:
http://chessclub.host22.com/raznoe/p...-spojller.html

sport-chess 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 21.12.2013 20:16
Цитата:
Сообщение от sport-chess
При нажатии не реагирует ссссс...ка. Вот пример:
Предполагается что скрытый блок идет следом за кнопкой. То есть убери обертку <p> .. </p>

Rise 21.12.2013 20:18
Цитата:
Сообщение от sport-chess (Сообщение 288214)
Что не так здесь? Тоже не работает..
 
<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 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 21.12.2013 20:25
Редактор сам добавляет значит теги <p></p>

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


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