Показать/скрыть текст
2 повідомлення
#17 років тому
Нужно при нажатии на ссылку показать/скрыть текст на html-странице, причем так, чтобы при показе текста ссылка менялась на СКРЫТЬ ТЕКСТ, а при скрывании текста ссылка перемещалась вверх на место скрытого текста и менялась на ПОКАЗАТЬ ТЕКСТ. Исходно текст толжен быть скрыт и ссылка должна называться ПОКАЗАТЬ ТЕКСТ. Все это должно работать в любых браузерах на обычных HTML-страницах. Видел, что все это делается при помощи CSS элемента ONCLICK всего в несколько строчек кода, но разобраться не смог. Кто подскажет?
19 повідомлень
#17 років тому
<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>
49 повідомлень
#17 років тому
style.display='block'
- плохое решение, лучше будет запоминать, какой изначально display был
document.getElementById('id2').tdisplay = document.getElementById('id2').style.display;
244 повідомлення
#17 років тому
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>
1 повідомлення
#17 років тому
А ещё проще какое jQuery к странице подключить. И пользоваться тамошними .hide() и .show()
49 повідомлень
#17 років тому
nikolay, нафиг jQuery, сразу ExtJS со всеми плагинами, эдак на 800Кб наберется я думаю
