@vadimakavadim
Web-Designer

Как добавлять и удалять классы у активных и неактивных элементов js (Спойлер)?

Доброго времени суток!
Не пинайте меня, я глуп и туп. В js, как Польша в космос.

Помогите с кодом js, нужно добавить класс открытому спойлеру(.spoiler_links), а у закрытых спойлеров(.spoiler_links) оставить другой класс. При том, что неактивных спойлеров может быть большое кол-во, а активный только один. Также, если спойлер закрывается, то и класс добавляется неактивного спойлера

$(document).ready(function(){ 
$('.spoiler_links').click(function(){ 
if($(this).next('div').is(':hidden')) 
{$("div[class^='spoiler_body']").hide('normal');} 
$(this).parent().children('div.spoiler_body').toggle('normal'); 
return false; 
}); 
});


Половину решения, пожалуйста не скидывайте, я даже интегрировать это не смогу
Обещаю выучить js со временем

Вот, то что я пытался сделать на css, но при повторном клике, выделение активного блока остается, хотя спойлер закрывается

.spoiler_links a:active, a:focus{ 
color:#191919; 
text-decoration: none; 
border-left:5px solid #9AFF4F; 
padding-left:5px; 
}

.spoiler_links a:active, a:focus .borderoff{ 
display:none; 
}

.borderoff{ 
margin-right:5px; 
border:1px solid #292929; 
width:12px; 
height:1px; 
display: inline-block; 
vertical-align: middle; 
}


<div>
              <a href="" class="spoiler_links"><span class="borderoff"></span>Ячейки и диапазоны</a>
              <div class="spoiler_body">
                <table width="100%" border="0" cellspacing="0" cellpadding="0">
                  <tr align="left" class="">
                    <td class="col-lg-6 blockspoiler"><h2>Сравнить диапазоны</h2>
                      <div class="text">Быстро сопоставьте данные двух таблиц. Найдите ячейки из первой таблице, 
                      которые присутствуют во второй. Найдите совпадающие данные. 
                      Объедините две таблицы исключив дубликаты.</div>
                    </td>
                    <td class="col-lg-6 blockspoiler"><h2>Сравнить диапазоны</h2>
                      <div class="text">Быстро сопоставьте данные двух таблиц. Найдите ячейки из первой таблице, 
                      которые присутствуют во второй. Найдите совпадающие данные. 
                      Объедините две таблицы исключив дубликаты.</div>
                    </td>
                  </tr>
                </table>
              </div>
            </div>
  • Вопрос задан
  • 401 просмотр
Пригласить эксперта
Ответы на вопрос 1
ThunderCat
@ThunderCat Куратор тега CSS
{PHP, MySql, HTML, JS, CSS} developer
выложите на jsfiddle, тут без поллитры не разобрать что работает, а что править надо.
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы