JavaScript: Показать скрыть элемент

Я покажу два решения. Оба простые, что понравится, то и используйте
1. создаем js функцию:
Данная функция позволяет показывать либо скрывать любой элемент с определённым id!
Как применить? Сначала нужно подключить функцию. Тут есть два варианта:
а) создать файл script.js и подключить его на странице
<script type="text/javascript" language="javascript" src="script.js"></script>
б) в теле страницы прописать
<script language="JavaScript" type="text/javascript">
тут функция
</script>
Как вызывать? Для двух способов подключения функции вывод один:
<a href="javascript:show_hide('element')">скрыть/показать</a> - это ссылка нажав на которую можно будет скрыть/показать элемент
Сам элемнт может быть чем угодно и располагаться где угодно (ниже или выше ссылки) для примера возьмем html тег div
<div id="element" style="display: none;">тут текст или любой другой элемент</div>
Красным выделен идентификатор тега, синим свойство тега, определяющее его как невидимый

2. тут все помещается в одной строке:

<div><div style="cursor:pointer;" onclick="var _n=this.parentNode.getElementsByTagName(\'div\')[1];if(_n.style.display==\'none\'){_n.style.display=\'\';}else{_n.style.display=\'none\';}">скрыть/показать</div><div style="display:none">тут текст или любой другой элемент</div></div>

Серым цветом обозначен div который выступает в качестве элемента, который открывает или закрывает соседний зеленый элемент (находящийся ниже!)

Оба эти элемента должны быть окружены еще одним дивом (выделен золотым цветом)

Тут на сайте используются оба способа:
1 для показа выпадающих смайлов, цветов текста/фона в панели редактирования сообщения
2 для вывода тега спойлер

Поделюсь своим способом))Нужен jqery.


в js файле нужно прописать эту функцию.

function hideShow(button,hiSh,text){
$(button).toggle(function(){
$(hiSh).slideUp(1000);
if(text) $(this).text("Развернуть");

},function(){
$(hiSh).slideDown(1000);
if(text) $(this).text("Cвернуть");
});
}

все теперь в этом же js файле вызываем эту функцию таким образом:

hideShow('.onOff','.main_link, .coin-slider, #coin-slider',true);

,где
1 аргумент это класс кнопки при нажатии на которую будут скрываться/раскрыватся элементы, дивы или ид которых указаны через запятую во втором аргументе.
в третем передаем тру или фолс, нужно менять текст на кнопке или нет.

в результате при нажатии на див с классом onOff закроются/раскроются дивы указаные во втором аргументе.


<div class="onOff">Свернуть</div>
<div class="main_link">
прам-пам-пам.

</div>

<div class="coin-slider">
прам-пам-пам.

</div>

<div id="coin-slider">
прам-пам-пам.

</div>.

Удобно тем что нужно только вызвать функцию и все. Никаких богомерзких онклик и т.п.

Zereb, ну онклик не особо богомерзко мне кажется. Куда худе конструкция javapapist: scriptHere()

seg0ro, это та, которая встраивается в ссылки, как то:
<a href="javascript:self.close();">Close</a> ?

Ну да. Вообще эта конструкция является устаревшей (но до сих пор поддерживается всеми! браузерами)

Zereb, вообще можно все действия типа onClick, onHover, onKeyUp прописать в скрипте, нпрм:

for(i=1;i<=10;i++) {
document.getElementById("elemID"+i).onclick="alert(\"This is an object with ID=elemID\"+i);";
}
document.onunload="func();";
document.getElementsByTagName("a")[0].onhover="changeStyle(this);";
function changeStyle(elem) {
elem.style.color="red";
}

Анасец, это все ненужные костыли. В нем есть много недостаков, и неудобств.

seg0ro, Помойму слаще хлеба нет чем яваскрипт прямо в штмл'е.