vendredi 8 mai 2015

Jquery simple accordian

I have simple Jquery accordian, but i have problem of changing header color when tab is opened

Here is my code

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;
}

What i need when some content is show to add class to that header? Here is working fiddle http://ift.tt/1zR82QY

Aucun commentaire:

Enregistrer un commentaire