Bootstrap Custom Side Menu with Toggle

Bootstrap Custom Side Menu with Toggle - Andrew Pougher

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<div class="container">
    <div class="row">
        <ul id="stuff-tabs" class="well well-sm">
            <li><a href="javascript:void" data-toggle="dropdown"><i class="fa fa-plus-circle"></i> <span>Close</span></a>

                <ul class="list-group">
<li class="list-group-item"><span class="badge" data-email="{{email}}"><i class="fa fa-envelope"></i></span>Contact Name</li>
<li class="list-group-item"><span class="badge" data-email="{{email}}"><i class="fa fa-envelope"></i></span>Contact Name</li>
                    <li class="list-group-item"><span class="badge" data-email="{{email}}"><i class="fa fa-envelope"></i></span>Contact Name</li>
                    <li class="list-group-item list-group-item-danger"><span class="badge" data-email="{{email}}"><i class="fa fa-user-times"></i></span>Contact Name</li>
                    <li class="list-group-item"><span class="badge" data-email="{{email}}"><i class="fa fa-envelope"></i></span>Contact Name</li>
                </ul>
            </li>
        </ul>
    </div>
</div>

CSS

body {
    background:#222;
    color:white;
}

.faded{opacity:0.3}

#stuff-tabs{

    position:absolute;
    top:60px;
    left:40%;
    min-width:210px;color:black;
   transition: opacity .25s ease-in-out;
   -moz-transition: opacity .25s ease-in-out;
   -webkit-transition: opacity .25s ease-in-out;}

a:hover{text-decoration:none}
.list-group-item .badge{
    opacity:0.2;
     transition: opacity .25s ease-in-out;
   -moz-transition: opacity .25s ease-in-out;
   -webkit-transition: opacity .25s ease-in-out;
}
.list-group-item:hover > .badge{opacity:1}

.blue{color:lightblue}


.menu-bar .menu-button .hamburger {
    display: inline-block;
    position: relative;
    margin-right: 6px;
    width: 15px;
    height: 12px;
    vertical-align: 0;
    -webkit-transition: -webkit-transform 400ms ease-in-out;
    transition: transform 400ms ease-in-out
}

.menu-bar .menu-button .hamburger .bun, .menu-bar .menu-button .hamburger .burger,
.menu-bar .menu-button .hamburger .toppings {
    position: absolute;
    left: 0;
    width: 100%;
    height: 0;
    border-bottom: 2px solid;
    -webkit-transform-origin: center;
    -ms-transform-origin: center;
    transform-origin: center;
    -webkit-transition: all 400ms ease-in-out;
    transition: all 400ms ease-in-out;
    -webkit-transition-property: top, margin-top, left, width, -webkit-transform;
    transition-property: top, margin-top, left, width, transform;
    -webkit-perspective: 1000px;
    perspective: 1000px
}

.menu-bar .menu-button .hamburger .toppings {
    top: 0
}

.menu-bar .menu-button .hamburger .burger {
    top: 50%;
    margin-top: -1px
}

.menu-bar .menu-button .hamburger .bun {
    top: 100%;
    margin-top: -2px
}

.menu-open .menu-bar .menu-button .hamburger {
    -webkit-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg)
}

.menu-open .menu-bar .menu-button .hamburger .toppings, .menu-open .menu-bar .menu-button .hamburger .bun {
    top: 50%;
   ...

JavaScript

$('#stuff-tabs li a').click(function () {
    $(this).next('ul').slideToggle(500);
    $(this).find('i').toggleClass('fa-plus-circle fa-minus-circle');
    $("#stuff-tabs").toggleClass("faded");
    $("span",this).html(function(_, oldText) {
         return oldText === 'Open' ? 'Close' : 'Open';
     });
});

// SHOW then close on load
$('#stuff-tabs li a').trigger("click");

$('.list-group-item').click(function () {
$(this).find('i').toggleClass('fa-envelope fa-check text-default');
});


$('.btn-primary').click(function () {
    var em = [];
    $('.fa-check').not('.fa-envelope').each( function(i) {
    var e = $('.fa-envelope').parent().data("email");
  //em.push(e);
               
    em.push({'em': e});
});
    

// save the new result array
//  localStorage.setItem("MailList", JSON.stringify(em));
    
  if (em.length !== 0) {  
alert(JSON.stringify(em))
  }else{
  alert("Please choose some emails before trying to send.")
  }
});

$('.menu-bar').click(function () {
    
     $(this).toggleClass('menu-open');
        });