<div class="accordion">
  <dl>
    <dt class="active"><a href="#"><span class="arrow"></span>Quality</a></dt>
    <dd class="active">
      <p>Nullam quis risus eget urna mollis ornare vel eu leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam quis risus eget urna mollis ornare vel eu leo. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Curabitur blandit tempus porttitor. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </dd>
    
    <dt><a href="#"><span class="arrow"></span>Products</a></dt>
    <dd>
      <p>Nullam quis risus eget urna mollis ornare vel eu leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam quis risus eget urna mollis ornare vel eu leo. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Curabitur blandit tempus porttitor. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </dd>
    
    <dt><a href="#"><span class="arrow"></span>About Us</a></dt>
    <dd>
      <p>Nullam quis risus eget urna mollis ornare vel eu leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam quis risus eget urna mollis ornare vel eu leo. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Curabitur blandit tempus porttitor. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </dd>
  </dl>
</div>

@import "compass/css3";

@mixin arrow-down($size: 10px, $color: #fff){
	width: 0; 
	height: 0; 
	border-left: $size solid transparent;
	border-right: $size solid transparent;
	border-top: $size solid $color;
}

@mixin arrow-right($size: 10px, $color: #fff){
	width: 0; 
	height: 0; 
	border-top: $size solid transparent;
	border-bottom: $size solid transparent;
	border-left: $size solid $color;
}

@mixin sans-serif() {
  font-family: "proxima-nova", "helvetica neue", helvetica, arial, sans-serif;
}

@mixin text-smooth()
{
  -webkit-font-smoothing: antialiased;
}

html, body {
  width: 100%;
  height: 100%;
}

body {
  background-color: #13487e;
  @include background-image(linear-gradient(top, rgb(19, 72, 126), rgb(14, 41, 69)));
  @include filter-gradient(rgb(19, 72, 126), rgb(14, 41, 69), vertical);
}

.accordion {
  width: 302px;
  margin: 0 auto;
  padding-top: 50px;
}

/* all accordion styles below here */

.accordion {
  
  dl {
    
    width: 302px;
    @include sans-serif;
    @include text-smooth;
    @include transition-duration(350ms);
    
    &:hover {
      @include box-shadow(0px 0px 10px 3px rgba(0, 0, 0, .25));
    }
    
    dt {
      
      a {
        background-color: #82A1BD;
        position: relative;
        text-transform: uppercase;
        width: 100%;
        height: 50px;
        display: block;
        line-height: 50px;
        text-align: center;
        cursor: pointer;
        font-weight: bold;
        color: #fff;
        text-decoration: none;
        
        .arrow {
            @include arrow-right(6px);
            position: absolute;
            left: 14px; 
            top: 18px;
            
            .cssanimations & {
              @include transition-duration(350ms);

              &.down-anim {
                @include rotate(90deg);
              }
            }
          
            &.down {
              @include arrow-down(6px);
              top: 21px;
              left: 12px;
            }
        }
      }
      
      &.active, &:hover {
        a {
            background-color: #507BA2;
        }
      }
      &.active {
        a {
          @include box-shadow(inset 0px -4px 8px 0px rgba(0, 0, 0, .2));
        }
      }
    }
    
    dd {
      background-color: #ffffff;
      @include background-image(linear-gradient(top, rgb(255, 255, 255), rgb(247, 247, 247)));
      @include filter-gradient(rgb(255, 255, 255), rgb(247, 247, 247), vertical);
      padding: 10px;
      display: none;
      height: 293px;
      
      &.active {
        display: block;
      }
      
      p {
        line-height: 1.4;
      }
    }
    
  }
}

(function($) {
// What does the accordion plugin do?
$.fn.accordion = function(options) {

  if (!this.length) { return this; }

  var opts = $.extend(true, {}, $.fn.accordion.defaults, options);

  this.each(function() {
    var $this = $(this).find('dl');
    
    var $all_panels = $this.find("dd");

    if(Modernizr.cssanimations)
    {
      $this.find("dt:first .arrow").addClass('down-anim');
    }
    else
    {
      $this.find("dt:first .arrow").addClass('down');
    }

    $this.find("dt > a").on('click', function(event){
	  
      event.preventDefault();
	  
      if(!$(this).parent().hasClass('active'))
      {
      
       $all_panels.slideUp();
       var $active = $('dl .active').removeClass('active');
       
       $(this).parent().next().slideDown().addClass('active');
       $(this).parent().addClass('active');
       
       if(Modernizr.cssanimations)
       {
         $active.filter('dt').find('.arrow').removeClass('down-anim');
         $(this).parent().find('.arrow').addClass('down-anim');
       }
       else
       {
         $active.filter('dt').find('.arrow').removeClass('down');
         $(this).parent().find('.arrow').addClass('down');
       }
      }
	  
    });

  });

  return this;
};

// default options
$.fn.accordion.defaults = {};
})(jQuery);



// call plugin
$(".accordion").accordion();