function close() {
document.GetElementById('block').style.display='none'; // Ищем в DOM (Документ) объект с id 'block' и задаем ему "невидимость"
document.GetElementById('hidelink').style.display='none'; // Ищем в DOM (Документ) объект с id 'hidelink' и задаем ему "невидимость"
document.GetElementById('showlink').style.display='block'; // Ищем в DOM (Документ) объект с id 'showlink' и задаем ему "видимость"
}
function open() {
document.GetElementById('block').style.display='block'; // Ищем в DOM (Документ) объект с id 'block' и задаем ему "видимость"
document.GetElementById('hidelink').style.display='block'; // Ищем в DOM (Документ) объект с id 'hidelink' и задаем ему "видимость"
document.GetElementById('showlink').style.display='none'; // Ищем в DOM (Документ) объект с id 'showlink' и задаем ему "невидимость"
}
html:
Code:
<a href="#" id="hidelink" onClick="close()"> Скрыть </a>
<!-- Эта ссылка видна изначально, при нажатии на неё (onclick) выполняем ф-цию close() -->
<a href="#" id="showlink" onClick="open()" style="display: none;">Раскрыть</a>
<!-- Эта ссылка станет видна после нажания на Скрыть, при нажатии на эту (onclick) выполняем ф-цию open() -->
<div id="block"> Трололо</div>
<!-- Эта блок, который мы и скрываем -->
Это самый простой и элементарный способ, есть море других более простых. Даже на CSS можно это осуществить
Jquery:
Итак. Jquery - библиотека javascript с кучей интересных ф-ций.
Итак. Делаем плавное скрытие блока.
JS:
Code:
<script type="text/javascript" language="javascript" src="/js/jquery.js"> </script> // Подключаем библиотеку jquery
<script>
$(document).ready(function(){ // По загрузке документа выполняем ф-цию
$(".showhide1").click(function () { // при нажатии на объект с class = showhide1 выполняем ф-цию
$(".obj1").slideToggle("slow"); // Медленно скрываем объект с class = obj1
});
});
</script>
HTML:
Code:
<div class="showhide1"> Трололо</div>
<div class="obj1"> Онотоле следит за тобой </div>