Question

I need an active link added to the actual a link on this accordion.. currently it just adds one to the container which is handy too but how easy to add an active to the button linke so i can have an up or down arrow…?

<dl class="accordion">

    <dt><a href="">Panel 1</a></dt>
    <dd>Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.</dd>

    <dt><a href="">Panel 2</a></dt>
    <dd>Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.</dd>

    <dt><a href="">Panel 3</a></dt>
    <dd>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis vel, nisi. Sed pretium, ligula sollicitudin laoreet viverra, tortor libero sodales leo, eget blandit nunc tortor eu nibh. Nullam mollis. Ut justo. Suspendisse potenti.</dd>

    </dl>​


jQuery(document).ready(function($) {



      var allPanels = $('.accordion > dd').hide();

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

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

        return false;
      });


});

Many thanks for any help..

Answer 1

try this…

jQuery(document).ready(function($) {
var allPanels = $('.accordion > dd').hide();

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

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

         $target.addClass('active').slideDown();

         $('.accordion > dt > a').removeClass('active'); // remove class active in <a>
         $this.addClass('active'); // add class active in clicked  <a>

         //or//

         $('.accordion > dt').removeClass('active'); // remove class active in <dt>
         $this.parent().addClass('active'); // add class active in clicked  <dt>
      }

    return false;
  });