Прячем иконки с помощью CSS и Javascript
Иногда возникает необходимость спрятать или показать текстовый блок или картинки при каком-то событии, например при нажатии на ссылку.
Рассмотрим пример:
Нужно иконки в меню, при нажатии на ссылку "скрыть иконки", спрятать и показать ссылку "показать иконки", при нажатии на нее иконки появляются снова.
Создаем таблицу с иконками и ссылками
 |
 |
 |
 |
 |
|
| Главная | Как найти | Музыка | Сервис | Заметки | |
| скрыть иконки показать иконки | |||||
Для ссылки "скрыть иконки" задаем id="link1", для ссылки "показать иконки" id="link2", а для строки таблицы id="hide_row". Это делается для того, чтобы с помощью javascript можно было обратится к свойствам CSS этих элементов.
Например:
Для id="link1" можно задать свойство display - document.getElementById('link1').style.display = 'inline';(выводит элементы как строку)
document.getElementById('link1').style.display = 'none'; (прячет элемент)
Создаем 2 функции в javascript, первая прячет какие-то элементы, другая наоборот, показывает одни и прячет другие.
<script>
function hide (){
document.getElementById('link2').style.display = 'inline';
(показываем ссылку 2)
document.getElementById('link1').style.display = 'none';
(прячем ссылку 1)
document.getElementById('hide_row').style.visibility = 'hidden';
(прячем иконки)
}
function show (){
document.getElementById('link1').style.display = 'inline';
(показываем ссылку 1)
document.getElementById('link2').style.display = 'none';
(прячем ссылку 2)
document.getElementById('hide_row').style.visibility = 'visible';
(показываем иконки)
}
</script>
Готово, оформляем текст, ссылки...
Этот код работает в Опере, Мозилле и ИЕ
Html код, который получился у меня >>
