[JS] Как менять класс объекта?

[..С...е...р...ы...й..]

Нужна функция или пример как при клике по ссылке показывать скрытый элемент и при повторном клике скрывать снова, подставляя нужный класс или стиль (display:none)

Подробно

Появилась идея в визуальном редакторе по умолчанию скрывать панель форматирования, у которой соответственно есть свой класс.

Код

<tr class="mceFirst">
   <td class="mceToolbar mceLeft mceFirst mceLast"></td>
</tr>

нужно чтоб по умолчанию JS подставлял невидимый класс или стиль, а при клике по ссылке [форматирование], стиль или класс менялся на видимый. В общем нужен самый элементарный эффект спойлера.

[beliyadm]

на Jquery вообще легко, за 5 минут пишется, по клику делаем AddClass с display: hidden и навешиваем событие hide(slow) на клик обратно - убираем класс RemoveClass и опять же эффект плавного появления

[era]

элемент, на который будут кликать - вызывает JS-функцию "CourseDisplay":

Код:

<div id="cimg_4" class="jscTreeImg" name="cimg_4">
<img border="0" align="absmiddle" src="/modules/mod_jsc_tree/images/kat_act.png" onclick="CourseDisplay(4); return false;"/>
</div>

сам элемент, который скрывать:

Код:

<div id="subcat_4" class="jscTreeAct" name="subcat_4">
Тут текст
</div>

JS, подменяет класс у DIV'а (в одном классе он скрытый, в другом видимый) + подменяет картинку (плюсик/минусик например) (в первом ):

Код:

<script type="text/javascript" language="JavaScript">
function CourseDisplay(id) {
d  = document.getElementById('subcat_'+id);
im = document.getElementById('cimg_'+id);
if (d.className == "jscTreeNoAct"){
d.className = "jscTreeAct"
im.innerHTML = '<img onclick="CourseDisplay('+id+'); return false;" border="0" src="/modules/mod_jsc_tree/images/kat_act.png" align="absmiddle">';
} else {
d.className = "jscTreeNoAct"
im.innerHTML = '<img onclick="CourseDisplay('+id+'); return false;" border="0" src="/modules/mod_jsc_tree/images/kat_noact.png" align="absmiddle">';
}
};
</script>

пример CSS для скрытых видимых:

Код:

div.jscTreeAct {
  display:block;
  margin-top:0;
  padding:0 0 0 15px;
  width:90%;
}

div.jscTreeNoAct {
 display:none;
 margin-top:0;
 padding:0 0 0 15px;
 width:100%;
}

[..С...е...р...ы...й..]

пришлось немного помаяться и доработать эту функцию под конкретно TinyMCE.

CSS:

<style type="text/css">
<!--
#comment_tbl{height:auto !important}      /* фикс: превращает фиксированную высоту таблицы редактора в нормальную */
tr.mceFirst{display:none}            /* скрывает панель форматирования по умолчанию, раньше чем срабатывает скрипт  */
.jscTreeAct{display:block !important}
.jscTreeNoAct{display:none}
-->
</style>



JavaScript:

<script type="text/javascript">
function CourseDisplay() {
   d  = document.getElementById('comment_tbl').getElementsByTagName('TR')[0];    // получает адрес нужной строки по ID таблицы и порядковому расположению строки
   im = document.getElementById('editor_exp');    // получает доступ к ссылке раскрытия спойлера по ID
   if (d.className == "mceFirst jscTreeAct"){
      d.className = "mceFirst jscTreeNoAct"
      im.innerHTML = 'Форматирование';
   } else {
      d.className = "mceFirst jscTreeAct"
      im.innerHTML = 'Свернуть форматирование';
   }
}
</script>



элемент, на который будут кликать - вызывает JS-функцию "CourseDisplay":

<a href="#" id="editor_exp" onclick="CourseDisplay(); return false;">[Форматирование]</a>



сам элемент, который нужно скрывать динамичный, то есть он генерируется непосредственно самим JavaScript редактора, по этому его нельзя увидеть статично в шаблонеформы, только в фаербаге, например, и выглядит этот код примерно так:

<table id="comment_tbl" class="mceLayout">
  <tr class="mceFirst">
      <td class="mceToolbar">  </td>
   </tr>
   <tr class="mceLast">
      <td class="mceIframeContainer>  </td>
   </tr>
</table>

[mayra]

Ребята, подскажите рецептик. Вопщем нужно, чтобы при наведении мыши в нужном месте отображалась картинка-линк. Или подскажите хотябы в каком редакторе это лучше и проще сделать. спасибо.