<div class="container">
<svg version="1.1" class="close" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="32px"
	 viewBox="0 0 42 42" enable-background="new 0 0 42 42" xml:space="preserve">

<path class="path one" fill="#cbcbcb" d="M42,21L42,21c0,1.1-0.9,2-2,2H2c-1.1,0-2-0.9-2-2v0c0-1.1,0.9-2,2-2H40C41.1,19,42,19.9,42,21z" cx="0" cy="0" />
<path class="path two" fill="#cbcbcb" d="M21,42L21,42c-1.1,0-2-0.9-2-2V2c0-1.1,0.9-2,2-2h0c1.1,0,2,0.9,2,2V40C23,41.1,22.1,42,21,42z" cx="10" cy="10" />
</svg>
<span>Select a value</span>
<ul class="list">
  <li><a href="#">A default value</a></li>
  <li><a href="#">Another one</a></li>
  <li><a href="#">Just one more</a></li>
</ul>  
</div>

@import compass

@import "compass/css3/shared"

*
  font-family: "Helvetica Neue", Arial
  color: #636363
  
+keyframes(colorFade)
  from
    color: #404040
  to
    color: #cbcbcb

.container
  margin: 200px auto 0
  width: 280px
  border: 3px solid #cbcbcb
  +border-radius(6px)
  padding: 15px
  overflow: hidden
  +transition(border 0.3s ease)
  backface-visibility: hidden
    
  > span
    font-size: 20px
    line-height: 32px
    font-weight: bold
    color: #cbcbcb
    padding: 0 5px
    +transition(color 0.3s ease)

    &.fade
      +animate(colorFade, 0.6s, 0s)

  &.hover
    border-color: darken(#cbcbcb, 10%)
    +box-shadow(0 0 14px 0 #efefef)
    
    > span
      color: darken(#cbcbcb, 10%)
    
  &.open
    ul
      height: 100px
      opacity: 1

  .close
    float: right

  
  ul
    display: none
    list-style-type: none
    padding: 0
    margin: 0
    font-weight: 200
    width: 100%
    margin-top: 10px
    +transition(all 0.3s ease)
    padding: 10px 5px 0
    margin-top: 15px
      
    a
      text-decoration: none
      font-size: 20px
      color: #cbcbcb
      font-weight: bold
      +transition(color 0.3s ease)

      &:hover
        color: #636363
      
      &.active        
        color: #636363

    li
      padding: 8px 0

  
.close
  fill: #cbcbcb
  position: relative
  +transform(rotate(0deg))
  +transition(all 0.3s ease)
  cursor: pointer

  path
    +transition(all 0.3s ease)
  
  &:hover
    path
      fill: #404040

  &.active
    +transform(rotate(-135deg))
      
    path
      fill: #404040
    

// Note: 
// There is a file named svg_extend.js which is loaded here.
// It allows us to user add/remove/has class which SVG's
// don't have out of the box.


// Grab our elements
// so we can use them below
var closeIcon =   document.querySelectorAll('svg.close'),
    $container = $('.container'),
    $list = $container.find('ul'),
    $links = $container.find('a'),
    $text = $container.find('span');


// When the '+' icon is clicked...
$(closeIcon).on('click', function() {
    // Add class to rotate icon to an 'x'
    this.toggleClass('active');
    // Toggle the list
    $list.toggle();
});

// When the icon is hovered, add
// a class to it's parent so we can style it
$(closeIcon).hover(function() {
  $container.addClass('hover');
}, function() {
  $container.removeClass('hover');
});


$links.on('click', function() {
  $links.removeClass('active');
  
    $(this).addClass('active');
  $text.text($(this).text()).addClass('fade');
  
  setTimeout(function(){
    $text.removeClass('fade');
  }, 800);
  
  $list.toggle();
  closeIcon.toggleClass('active');
});