Показать/скрыть текст | Программирование | Форум

Автор

Сообщение

Сообщения: 2
Страна: Россия

09.05.2008 в 12:59

Нужно при нажатии на ссылку показать/скрыть текст на html-странице, причем так, чтобы при показе текста ссылка менялась на СКРЫТЬ ТЕКСТ, а при скрывании текста ссылка перемещалась вверх на место скрытого текста и менялась на ПОКАЗАТЬ ТЕКСТ. Исходно текст толжен быть скрыт и ссылка должна называться ПОКАЗАТЬ ТЕКСТ. Все это должно работать в любых браузерах на обычных HTML-страницах. Видел, что все это делается при помощи CSS элемента ONCLICK всего в несколько строчек кода, но разобраться не смог. Кто подскажет?

demchukv

(3.2)

Сообщения: 22
Страна: Украина

09.05.2008 в 13:23 [Отредактировано: 09.05.2008 в 13:31]

Код:

<a href="javascript:void(null)" id="id1"
onclick="if(document.getElementById('id2').style.display=='none') {
document.getElementById('id2').style.display='block';
document.getElementById('id1').innerHTML='Скрыть текст';
}else{
document.getElementById('id2').style.display='none';
document.getElementById('id1').innerHTML='Показать текст';}">Показать текст</a><br />
<div id="id2" style="display:none;">Текст ...</div>

Vadyacorp

Сообщения: 47
Страна: Россия

12.05.2008 в 20:11

Код:

style.display='block'

- плохое решение, лучше будет запоминать, какой изначально display был

Код:

document.getElementById('id2').tdisplay = document.getElementById('id2').style.display;

VistaSolutions

(99.3)

Сообщения: 221
Страна: Россия

12.05.2008 в 20:29 [Отредактировано: 12.05.2008 в 20:31]

Код:

css

.show {
display: block;
visibility: visible;
}

.hidden {
display: none;
visibility: hidden;
}

javascript

function toggle(tag, elm)
{

var obj = document.getElementById(elm);
var type = (obj.className == 'hidden') ? 'show' : 'hidden';

tag.innerHTML = (type == 'hidden') ? 'Показать текст' : 'Спрятать текст';

obj.className = type;
}

html

<div id="item">bla</div>
<a href="javascript:toogle(this, 'item')">Показать текст</a>

nikolay

Сообщения: 2
Страна: Россия

20.05.2008 в 23:52

А ещё проще какое jQuery к странице подключить. И пользоваться тамошними .hide() и .show()

Vadyacorp

Сообщения: 47
Страна: Россия

21.05.2008 в 04:41

nikolay, нафиг jQuery, сразу ExtJS со всеми плагинами, эдак на 800Кб наберется я думаю

Tchokurov

(2.5)

Сообщения: 246
Страна: Украина

21.05.2008 в 08:34

Ну раз холивар, то script.aculo.us slideDows

Автор	Сообщение
artmastak Сообщения: 2 Страна: Россия	09.05.2008 в 12:59 Нужно при нажатии на ссылку показать/скрыть текст на html-странице, причем так, чтобы при показе текста ссылка менялась на СКРЫТЬ ТЕКСТ, а при скрывании текста ссылка перемещалась вверх на место скрытого текста и менялась на ПОКАЗАТЬ ТЕКСТ. Исходно текст толжен быть скрыт и ссылка должна называться ПОКАЗАТЬ ТЕКСТ. Все это должно работать в любых браузерах на обычных HTML-страницах. Видел, что все это делается при помощи CSS элемента ONCLICK всего в несколько строчек кода, но разобраться не смог. Кто подскажет?
demchukv (3.2) Сообщения: 22 Страна: Украина	09.05.2008 в 13:23 [Отредактировано: 09.05.2008 в 13:31] Код: <a href="javascript:void(null)" id="id1" onclick="if(document.getElementById('id2').style.display=='none') { document.getElementById('id2').style.display='block'; document.getElementById('id1').innerHTML='Скрыть текст'; }else{ document.getElementById('id2').style.display='none'; document.getElementById('id1').innerHTML='Показать текст';}">Показать текст</a><br /> <div id="id2" style="display:none;">Текст ...</div>
Vadyacorp Сообщения: 47 Страна: Россия	12.05.2008 в 20:11 Код: style.display='block' - плохое решение, лучше будет запоминать, какой изначально display был Код: document.getElementById('id2').tdisplay = document.getElementById('id2').style.display;
VistaSolutions (99.3) Сообщения: 221 Страна: Россия	12.05.2008 в 20:29 [Отредактировано: 12.05.2008 в 20:31] Код: css .show { display: block; visibility: visible; } .hidden { display: none; visibility: hidden; } javascript function toggle(tag, elm) { var obj = document.getElementById(elm); var type = (obj.className == 'hidden') ? 'show' : 'hidden'; tag.innerHTML = (type == 'hidden') ? 'Показать текст' : 'Спрятать текст'; obj.className = type; } html <div id="item">bla</div> <a href="javascript:toogle(this, 'item')">Показать текст</a>
nikolay Сообщения: 2 Страна: Россия	20.05.2008 в 23:52 А ещё проще какое jQuery к странице подключить. И пользоваться тамошними .hide() и .show()
Vadyacorp Сообщения: 47 Страна: Россия	21.05.2008 в 04:41 nikolay, нафиг jQuery, сразу ExtJS со всеми плагинами, эдак на 800Кб наберется я думаю
Tchokurov (2.5) Сообщения: 246 Страна: Украина	21.05.2008 в 08:34 Ну раз холивар, то script.aculo.us slideDows