Не работает выпадающее меню

[WeStyle]

Добрый день, уважаемые форумчане.
Нужна помощь в реализации элементарной функции. Сам в Javascript'e не разбираюсь, но приходится делать. В общем, проблема в следующем:

Есть html код меню:

<nav id=main_nav>
<div class="catalog">
<a id="main_nav_header" href="javascript:void(0);"> Каталог товаров </a>
<div id="main_nav_body" style="display: none;">
Вот тут будет список с пунктами меню.
</div>
</div>
</nav>

И есть вот такой javascript:

var $=jQuery.noConflict();
$('#main_nav_header').click(function() {
$('#main_nav_header').addClass('show_hide');
$('#main_nav_body').removeClass('show_hide');
return false;
});

И такой вот css:
.show_hide {
display:none;
}

Нужно, чтобы при нажатии на ссылку Каталог - появлялся блок с меню. Консоль ошибок не выдает, но меню не выпадает. Заранее благодарю за помощь.

[kostyanet]

Сам в Javascript'e не разбираюсь

Зато хорошо разбираетесь в jquery.

[WeStyle]

Зато хорошо разбираетесь в jquery.

В нем тоже не разбираюсь, поэтому и прошу помощи... Скрипт написан не мной, собственно поэтому и не могу починить.

[kostyanet]

Начните чинить отсюда

$('#main_nav_header').click(function() {
$('#main_nav_header').addClass('show_hide');
$('#main_nav_body').removeClass('show_hide');
return false;
});

внутри безымянной функции $('#main_nav_header') существует как this в который в любое время до click может быть добавлена проперть для связи с $('#main_nav_body')

[kostyanet]

В общем если вы сами не видите что

<div id="main_nav_body" style="display: none;">

это элемент вне разметки благодаря стилю, а

$('#main_nav_body').removeClass('show_hide');

удаляет оформление в классе

.show_hide {display:none;}

которого там никогда не было, то значит не хотите видеть.

Насколько умен жиквери я судить не берусь, в смысле может евойный римувкласс выкосить по-атрибутно, но по обычной житейской логике должно быть так

<div id="main_nav_body" class="show_hide">

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

[kostyanet]

И почему он назван show_hide когда делает только hide? Ну и главное это жикверя как из пушки по воробьям.

var elem = document.getElementById('main_nav_header');
if(elem)
 elem.addEventListener('click', function(){
  this.style.display="";
}, false);

И тогда

<div id="main_nav_body" style="display: none;">

остается как ест.

А, вам еще скрыть надо соседний. Упомяните его по той же схеме внутри колбэка.