Jquery простой Accordian

Question

У меня есть простой Jquery Accordian, но у меня есть проблема изменения цвета заголовка, когда вкладка открыта

Вот мой код

HTML

<dl class="accordion-modal"> 

    <dt><a href=""><header>FIRST</header></a></dt> 
      <dd class="active-accordian">FIRST CONTENT</dd> 

<dt><a href=""><header>SECOND</header></a></dt> 
<dd>SECOND CONTENT</dd> 

</dl> 

JS

(function($) { 

    var allPanels = $('.accordion-modal > dd').hide(); 
    $('.accordion-modal > .active-accordian').show(); 

    $('.accordion-modal > dt > a').click(function() { 
     $this = $(this); 
     $target = $this.parent().next(); 

     if(!$target.hasClass('active')){ 
     allPanels.removeClass('active').slideUp(); 
     $target.addClass('active').slideDown(); 
     } 

    return false; 
    }); 

})(jQuery); 

CSS

header{ 
    background-color:green; 
} 

.active{ 
    background-color:red; 
} 

.active-header-color{ 
    background-color:blue; 
} 

Что мне нужно, когда некоторые содержание показывают, чтобы добавить класс к этому заголовку? Здесь находится рабочая скрипка https://jsfiddle.net/7hLzqoxe/4/

Answer 1

вот моя скрипка. ссылка на него

Все, что вам нужно было сделать, это добавить display:inline-block в <a> элемент, поскольку он является встроенным элементом.

https://jsfiddle.net/7hLzqoxe/5/

Это была главная часть, которая нуждается в изменении

$('.accordion-modal > dt > a').click(function() { 
        $(this).children('header').addClass('green'); 
$(this).parent().siblings().children('a').children('header').removeClass('green');      //$(this).parent().siblings().children('a').removeClass('green'); 
        allPanels.slideUp(); 
        $(this).parent().next().slideDown(); 
        return false; 
       }); 

обновленный JS скрипку https://jsfiddle.net/7hLzqoxe/6/