A Pen by Scott Marshall.

index.html

<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css'>

<div class="wrapper">
<div class="accordian move">
  <ul class="first-menu">
    <h1 class="link">First Menu <span class="arrow"></span></h1>
    <ul class="menu">
    <li><a href="#">List Item 1</a></li>
    <li><a href="#">List Item 2</a></li>
    <li><a href="#">List Item 3</a></li>
    <li><a href="#">List Item 4</a></li>
    </ul>
  </ul>
</div>
  
<div class="accordian">
  <ul class="second-menu">
    <h1 class="link">Second Menu<span class="arrow"></span></h1>
    <ul class="menu">
    <li><a href="#">List Item 1</a></li>
    <li><a href="#">List Item 2</a></li>
    <li><a href="#">List Item 3</a></li>
    <li><a href="#">List Item 4</a></li>
    </ul>
  </ul>
</div>
  
<div class="accordian">
  <ul class="second-menu">
    <h1 class="link">Third Menu<span class="arrow"></span></h1>
    <ul class="menu">
    <li><a href="#">List Item 1</a></li>
    <li><a href="#">List Item 2</a></li>
    <li><a href="#">List Item 3</a></li>
    <li><a href="#">List Item 4</a></li>
    </ul>
  </ul>
</div>
  
  <div class="accordian">
  <ul class="second-menu">
    <h1 class="link">Fourth Menu<span class="arrow"></span></h1>
    <ul class="menu">
    <li><a href="#">List Item 1</a></li>
    <li><a href="#">List Item 2</a></li>
    <li><a href="#">List Item 3</a></li>
    <li><a href="#">List Item 4</a></li>
    </ul>
  </ul>
</div>
  
  <div class="accordian">
  <ul class="second-menu">
    <h1 class="link">Fifth Menu<span class="arrow"></span></h1>
    <ul class="menu">
    <li><a href="#">List Item 1</a></li>
    <li><a href="#">List Item 2</a></li>
    <li><a href="#">List Item 3</a></li>
    <li><a href="#">List Item 4</a></li>
    </ul>
  </ul>
</div>
</div>

SASSY,-BOUNCY-ACCORDION.markdown

SASSY, BOUNCY ACCORDION

Here is a nice little accordion I made as soon as I learned sass, enjoy!

A Pen by Scott Marshall on CodePen.

License.

script.js

$(".link").click(function(){

  if($(this).hasClass("active")){
    $(".link").removeClass("active");
  }else{
    $(".link").addClass("active");
  }
  
$(".menu").slideUp();
    if ($(this).next().is(":hidden")){
    $(this).next().slideDown(1000,'easeOutBounce');
    }
});

style.scss

@import "compass";
/******************************************************
VARIABLES
******************************************************/
$accoBG:#292929; /*Accordian menu color*/

/******************************************************
MIXINS
******************************************************/
@mixin background{
  background-image: -ms-linear-gradient(top, #3D3D3D 0%, #212121 100%);
  background-image: -moz-linear-gradient(top, #3D3D3D 0%, #212121 100%);
  background-image: -o-linear-gradient(top, #3D3D3D 0%, #212121 100%);
  background-image: 
  -webkit-gradient(linear, left top, left bottom, color-stop(0, #3D3D3D), color-stop(1, #212121));
  background-image: -webkit-linear-gradient(top, #3D3D3D 0%, #212121 100%);
  background-image: linear-gradient(to bottom, #3D3D3D 0%, #212121 100%);
}

@mixin wrapper{
  width:400px;
  margin:0 auto;
}

@mixin text{
  color:#FFF;
  text-shadow:#000 0px 1px 2px;
  font:12px Open Sans;
  text-decoration:none;
}

@mixin arrow{
  content:"";
  width: 0; 
	height: 0; 
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;	
	border-top: 5px solid #FFF;
  position:absolute;
}

@mixin headertext{
  color:#FFF;
  position:relative;
  text-shadow:#000 0px 1px 2px;
  font:13px Open Sans;
  text-transform:uppercase;
  padding:10px;
  margin:0px;
  @include background;
  border-top:1px solid rgba(255,255,255,0.2);
}

/******************************************************
BODY/HTML
******************************************************/
html { 
  background-image: -ms-radial-gradient(center bottom, circle farthest-corner, #E6F1D2 0%, #2B8B9D 100%);
  background-image: -moz-radial-gradient(center bottom, circle farthest-corner, #E6F1D2 0%, #2B8B9D 100%);
  background-image: -o-radial-gradient(center bottom, circle farthest-corner, #E6F1D2 0%, #2B8B9D 100%);
  background-image: -webkit-gradient(radial, center bottom, 0, center bottom, 561, color-stop(0, #E6F1D2), color-stop(1, #2B8B9D));
  background-image: -webkit-radial-gradient(center bottom, circle farthest-corner, #E6F1D2 0%, #2B8B9D 100%);
  background-image: radial-gradient(circle farthest-corner at center bottom, #E6F1D2 0%, #2B8B9D 100%);
min-height:100%;
}

/******************************************************
WRAPPERS
******************************************************/
.wrapper{
  @include wrapper;
}

/******************************************************
PAGE TEXT
******************************************************/
h1{
  @include headertext;
}

/******************************************************
ACCORDIAN MENU'S
******************************************************/
.first-menu{
  width:400px;
  padding:0px;
  margin:0px;
  border:1px solid #000;
  background:$accoBG;
}

.second-menu{
  width:400px;
  padding:0px;
  margin:0px;
  border-top:none !important;
  border:1px solid #000;
  background:$accoBG;
}

.menu{
  display:none;
  list-style:none;
  padding:0px;
    li{
      padding:10px;
      border-bottom:1px solid rgba(0,0,0,0.8);
      border-top:1px solid rgba(255,255,255,0.1);
    }

    li:hover{
      @include background;
      border-bottom:1px solid rgba(0,0,0,0.8);
    }

    li a{
      @include text;
    }
  
    li:first-child{
     border-top:1px solid #000;
    }

    li:last-child{
      border-bottom:none;
    }
}

/******************************************************
ACCORDIAN ARROWS
******************************************************/
.arrow{
  top:18px;
  left:370px;
  @include arrow;
}

.arrow:hover{
  cursor:pointer;
}

/******************************************************
ACCORDIAN ACTIVE STATE (OPTIONAL)
******************************************************/
.active{
  //ADD STYLE HERE IF NEEDED
}

/******************************************************
PLACEMENT FOR CODEPEN
******************************************************/
.move{
  margin-top:50px;
}