Показать / Скрыть текст.

andrecool · June 17, 2011

Скрипт Показать / Скрыть текст.

В Google Chrome и Internet Explorer работает нормально, но в Mozilla Firefox не работает.

Скрипт взят здесь http://www.sdws.ru/topic.php?t=3&id=10

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Показать-Скрыть</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<style type="text/css">
a {outline: none;}
a img {border: none;}
</style>
<script type="text/javascript">

function on(n){
eval("document.all.text"+n+".style.display='block';");
eval("document.all.ontext"+n+".style.display='none';");
eval("document.all.offtext"+n+".style.display='inline';");
}
function off(n){
eval("document.all.text"+n+".style.display='none';");
eval("document.all.ontext"+n+".style.display='inline';");
eval("document.all.offtext"+n+".style.display='none';");
}

</script>
</head>
<body>
<h3>Показать-Скрыть</h3>
<span id='ontext1' style='display: inline;'><a href="javascript:on('1');"><img src="img/1.png" alt="Показать" title="Показать"></a></span>
<span id='offtext1' style='display: none;'><a href="javascript:off('1');"><img src="img/2.png" alt="Скрыть" title="Скрыть"></a></span>
<div id='text1' style='display: none; text-align: justify;'>
Скрытый Текст Скрытый Текст Скрытый Текст Скрытый Текст<br>
Скрытый Текст Скрытый Текст Скрытый Текст Скрытый Текст<br>
Скрытый Текст Скрытый Текст Скрытый Текст Скрытый Текст<br>
Скрытый Текст Скрытый Текст Скрытый Текст Скрытый Текст<br>
</div>
</body>
</html>

Edited June 17, 2011 by andrecool

psywalker · June 18, 2011

Не работает, потому что тупо копируешь. А вообще для такой задачи очень жирно использовать eval, он жутко тормозит процесс в связи со своей компиляцией кода. Если не хочешь писать код сам, поищи получше что нибудь.

ctpz · June 18, 2011

Вот вариант скрипта, работающий во всех броузерах и весящий меньше.

psywalker · June 18, 2011

Вот вариант скрипта, работающий во всех броузерах и весящий меньше.

+ подключать библиотеку?

ctpz · June 18, 2011

Скрипт работает и при версии библиотеки 1.3.2 minified gzipped, которая весит 20 КБ.

psywalker · June 18, 2011

Скрипт работает и при версии библиотеки 1.3.2 minified gzipped, которая весит 20 КБ.

Это накладно для такой мини-задачи, а потом твой пример делает совсем другое, чем просто открытие/скрытие текста.

kohozabr · June 18, 2011

Переделанный методом тыка спойлер Edited June 18, 2011 by kohozabr

andrecool · June 18, 2011

Вот вариант скрипта, работающий во всех броузерах и весящий меньше.

jQuery это конечно круто, но хотелось простой спойлер со сменой надписи Показать / Скрыть или картинок

psywalker · June 18, 2011

Вот вариант скрипта, работающий во всех броузерах и весящий меньше.
jQuery это конечно круто, но хотелось простой спойлер со сменой надписи Показать / Скрыть или картинок

Кажись в ФФ не пашет document.all

kohozabr · June 18, 2011

А jQuery пашет в FF?

Edited June 18, 2011 by kohozabr

andrecool · June 18, 2011

Этот код работает во всех браузерах, но в нем не меняется надпись Показать/Скрыть

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Показать/Скрыть</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">

<style type="text/css">
a {outline: none;}
a img {border: none;}
</style>

<script type="text/javascript">
function look(type){
param=document.getElementById(type);
if(param.style.display == "none") param.style.display = "block";
else param.style.display = "none"
}
</script>

</head>
<body>

<!-- блок "div1" -->
<a href="javascript:look('div1');">Показать/Скрыть</a>
<div id="div1" style="display: none;">
Скрытый текст Скрытый текст Скрытый текст Скрытый текст
</div>

</body>
</html>

Int · June 18, 2011

Ну так меняй её! Передавай в функцию параметр this, получай у него innerHTML (это короче, чем firstChild.nodeValue) и меняй его

Да, при твоей постановке задачи скрипт будет косячить. Изначально текст скрыт, style.display = '', а значит, что при первом нажатии он скроется ещё раз. Используй или computedStyle или просто поменяй местами параметры у if.

«javascript:» писать не обязательно

Кто это там ради 7 строчек предлагает 20 кб подгружать? Васы бы в 80-е года, чтобы учились писать оптимальные агоритмы. Сегодня таскаете за собой ненужные библиотеки, а завтра для расчёта траектории ракеты вам понадобится кластер на 100 машин.

andrecool · June 18, 2011

Вот нашел нормальный рабочий пример

сайт этого скрипта

<html>
<head>
<title>JavaScript Скрыть текст</title>
</head>
<body>
<script language="javascript">
function Switch(idd,idi)
 {
 elm=document.getElementById(idd);
 img=document.getElementById(idi);
 if(elm.style.display=="none")
  {
  elm.style.display="";
  img.src="images/dash.gif";
  }
 else
  {
  elm.style.display="none";
  img.src="images/krest.gif";
  }
 return false;
 }
</script>

<h3>JavaScript Скрыть текст</h3>
<a href="" onclick="return Switch('ID','IDimg')">
<img src="images/krest.gif" border="0" height="16" width="32" align="middle" id="IDimg">Открыть/Закрыть</a><br>
<div style="display:none" id="ID">
<h2>Ура !!!<h2>
<h3>Получилось !!!<h3>
</div>
</body>
</html>

Edited June 18, 2011 by andrecool

Int · June 18, 2011

Опять с твоей ситуацией первое нажатие пройдёт вхолостую, потому что сперва выполнится ветка else, так как style.display пустой при запуске.

А onclick на картинку разве лучше смотрится? Зачем эти извраты с return?

<h2>Ура !!!<h2>
<h3>Получилось !!!<h3>

Тэги-то закрывай. А писание скрипта вынеси лучше в <head>

andrecool · June 18, 2011

Опять с твоей ситуацией первое нажатие пройдёт вхолостую, потому что сперва выполнится ветка else, так как style.display пустой при запуске.
А onclick на картинку разве лучше смотрится? Зачем эти извраты с return?

Если вы разбираетесь в javascript помогите пожалуйста исправить ошибки в скрипте.

Int · June 18, 2011

Ну я ж писал, что надо if и else поменять местами

f(elm.style.display=="block")
  {
  elm.style.display="none";
  img.src="images/dash.gif";
  }
 else
  {
  elm.style.display="block";
  img.src="images/krest.gif";
  }

<img Switch('ID','IDimg')....

Вот так ещё можно сократить и выкинуть <a>

А ещё для сокращения кода можно сделать Switch('ID',this), и соответственно изменить функцию. Даже можно Switch(this.nextSibling,this)

andrecool · June 18, 2011

Ну я ж писал, что надо if и else поменять местами
f(elm.style.display=="block")
  {
  elm.style.display="none";
  img.src="images/dash.gif";
  }
 else
  {
  elm.style.display="block";
  img.src="images/krest.gif";
  }
<img Switch('ID','IDimg')....
Вот так ещё можно сократить и выкинуть <a>
А ещё для сокращения кода можно сделать Switch('ID',this), и соответственно изменить функцию. Даже можно Switch(this.nextSibling,this)

<script type="text/javascript">
function Switch(idd,idi)
 {
 elm=document.getElementById(idd);
 img=document.getElementById(idi);
 if(elm.style.display=="block")
  {
  elm.style.display="none";
  img.src="images/krest.gif";
  }
 else
  {
  elm.style.display="block";
  img.src="images/dash.gif";
  }
 return false;
 }
</script>

Так правильно?

Правда картинки тоже поменял местами так как они работали наоборот.

Int · June 19, 2011

Ну если работает хорошо, то нормально.

Про картинки я забыл, да.

andrecool · June 19, 2011

Ну если работает хорошо, то нормально.
Про картинки я забыл, да.

Вы говорили что здесь можно сделать сокращения,не считая конечно высоты,ширины и бордюра

<a href="" onclick="return Switch('ID','IDimg')">
<img src="images/krest.gif" border="0" height="16" width="32" align="middle" id="IDimg"></a>

Int · June 19, 2011

Да, можно onclick задать самой картинке, а не ссылке. И выкинуть return

andrecool · June 19, 2011

Да, можно onclick задать самой картинке, а не ссылке. И выкинуть return

<script type="text/javascript">
function Switch(idd,idi)
 {
 elm=document.getElementById(idd);
 img=document.getElementById(idi);
 if(elm.style.display=="block")
  {
  elm.style.display="none";
  img.src="img/krest.gif";
  }
 else
  {
  elm.style.display="block";
  img.src="img/dash.gif";
  }
 }
</script>

<img onclick="Switch('id','idimg')" src="img/krest.gif" id="idimg">

Edited June 19, 2011 by andrecool

MAXMUSIC · August 16, 2011

Вот хороший спойлер как на “rutracker.org”

Работает везде

Неограниченная вложенность с функцией закрытия

webfile.ru/5489455

Joerrigo · March 27, 2013

Новый вопрос - новая тема.

Edited March 27, 2013 by Great Rash

Sign In

Показать / Скрыть текст.

Question

Link to comment

Share on other sites

22 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Обсуждения

Important Information