Смена стиля при клике
 

Уважаемые, помогите, пожалуйста, решением проблемы.
Есть следующий код:

<script type="text/javascript">
    function spoiler(id) {
        if(document.getElementById(id).style.display == "none"){
            document.getElementById(id).style.display = "";
 
        } else {
            document.getElementById(id).style.display = "none";
        }
    }
</script>
 

<div class="color1" onclick="javascript:spoiler('spoil1')">Открыть спойлер</div>
<div id="spoil1" style="display: none;">Скрытый текст</div>

Как Вы можете видеть, он открывает скрытый DIV с ID "sploil1". Необходимо доработать этот скрипт то того, чтобы при этом происходила также замена класс "color1" на "color2" (и обратно при повторном клике).

На всякий случай ещё раз:
1. Кликаем: открывается скрытый DIV, основной DIV меняет класс на "color2"
2. Кликаем повторно: спойлерный DIV обратно скрывается, а основной DIV меняет класс обратно с "color2" на "color1"

Заранее благодарю за помощь.
С меня плюс в карму.

Нашёл решение:

<script type="text/javascript">
    function spoiler(id) {
        if   (  document.getElementById(id).style.display == "none" )
             {  document.getElementById(id).style.display = "";   } 
        else {  document.getElementById(id).style.display = "none"; }
                         }
</script>
 

<script>
function toggleClass(el, class1, class2) {
    el.className = (el.className == class1) ? class2 : class1; } </script>



<div class="color1" onclick="spoiler('spoil1'); toggleClass(this, 'color1', 'color2')">Открыть спойлер</div>
<div id="spoil1" style="display: none;">Скрытый текст</div>