<div class="accordion">
  <div class="panel closed">
    <div class="panel-header">
      <i class="fa fa-bar-chart"></i>Panel 1 Title<i class="fa fa-angle-right arrow"></i>
      <span class="spacer"></span>
    </div>
    <div class="panel-content">
      <div class="item"><i class="fa fa-book"></i><span>Menu Item 1</span></div>
      <div class="item"><i class="fa fa-cog"></i><span>Menu Item 2</span></div>
      <div class="item"><i class="fa fa-credit-card"></i><span>Menu Item 3</span></div>

    </div>
  </div>
  

  <div class="panel closed">
    <div class="panel-header">
      <i class="fa fa-line-chart"></i>Panel 2 Title<i class="fa fa-angle-right arrow"></i>
      <span class="spacer"></span>
    </div>
    <div class="panel-content">
      <div class="item"><i class="fa fa-envelope-o"></i><span>Menu Item 1</span></div>
      <div class="item"><i class="fa fa-address-card"></i><span>Menu Item 2</span></div>
      <div class="item"><i class="fa fa-calendar"></i><span>Menu Item 3</span></div>

    </div>
  </div>

  <div class="panel closed">
    <div class="panel-header">
      <i class="fa fa-area-chart"></i>Panel 3 Title<i class="fa fa-angle-right arrow"></i>
      <span class="spacer"></span>
    </div>
    <div class="panel-content">
      <div class="item"><i class="fa fa-file-pdf-o"></i><span>Menu Item 1</span></div>
      <div class="item"><i class="fa fa-folder-open-o"></i><span>Menu Item 2</span></div>
      <div class="item"><i class="fa fa-sitemap"></i><span>Menu Item 3</span></div>

    </div>
  </div>

</div>

body {
    background: #86bb89;
    font-family: verdana, arial;
}

.accordion {
    display: block;
    width: 400px;
    overflow: hidden;
    margin: 0 auto;
    background: white;
    border-radius: 4px;
    position: relative;
    box-shadow: 0 2px rgba(0, 0, 0, 0.12);
}
.panel {
    display: block;
    background: white;
    position:relative;
    overflow: hidden;
    color: #b5abab;
    margin: 0 auto;
}
.panel-header {
    line-height: 56px;
    background: white;
    cursor: pointer;
    text-indent:15px;
    border-bottom: 1px solid #e4e4e4;
}

.spacer {
    height: 3px;
    position: absolute;
    width: 0;
    display: block;
    top: 54px;
    background: #38B087;
}

.panel-content {
    background: rgba(92, 127, 94, 0.72);
    position: relative;
    border-top: 0px solid rgba(0, 0, 0, 0.12);
    height: 0;
}
.item {
    display: block;
    width:100%;
    cursor: pointer;
    padding: 15px 0;
    text-decoration:none;
    color:white;
    text-indent:25px;
    border-bottom:1px solid rgba(0, 0, 0, 0.06);
}
.item:hover {
    background-color: rgba(0, 0, 0, 0.06);
}
.panel i {
    text-indent:0;  /* Keep paragraph text-indent setting from affecting icons */
    padding-right: 6px;
}
.panel span i {

    padding-right: 0; /* No padding on arrow icon */
}
.arrow {
    text-indent:0;  /* Keep paragraph text-indent setting from affecting icons */
    line-height: 56px;
    float: right;
    position: relative;
    right: 16px;
    font-weight: bold;
}

/* ===== Variables ===== */
var header = document.querySelectorAll(".panel-header"),
    item = document.querySelectorAll(".item"),
    hoverPanelTl = [],
    openedPanel = {};

Array.prototype.forEach.call(header, function (el, i) {
    var arrow = el.querySelector(".arrow"),
        spacer = el.querySelector(".spacer"),
        panel = el.parentNode,
        content = panel.querySelector(".panel-content");

    hoverPanelTl[i] = new TimelineLite({paused: true});

    /* ============= Define hover animation ============= */
    hoverPanelTl[i].to(el, 0.2, {
        css: {
            color: "#4f7351",
            background: "rgba(203, 228, 205, 0.6)",
            textIndent: "25px"
        },
        ease: Linear.easeNone
    });

    /* ============= Add event listeners ============= */
    el.addEventListener("mouseenter", function () {
        if (!hoverPanelTl[i].paused() || panel.classList.contains("closed")) {
            hoverPanelTl[i].timeScale(1).play();
            TweenLite.to(spacer, .5, {width: '100%'});
        }
    });

    el.addEventListener("mouseleave", function () {
        if (!hoverPanelTl[i].paused()) {
            hoverPanelTl[i].timeScale(3).reverse();
            TweenLite.to(spacer, .1, {width: 0});
        }
    });

    el.addEventListener("click", function () {
        /* ============= If panel open ============= */
        if (!panel.classList.contains("closed")) {
            hoverPanelTl[i].paused(false);
            TweenLite.set(spacer, {width: "100%"});
            TweenLite.to(content, 0.3, {height: 0, borderTopWidth: 0});
            TweenMax.to(arrow, 0.3, {rotation: 0, transformOrigin: "25% 50%"});
            panel.classList.add("closed");
            openedPanel = {};
        } else {

            /* ============= Auto close open panels ============= */
            if (openedPanel.el != undefined) {
                console.log(openedPanel);
                var openArrow = openedPanel.el.querySelector(".arrow"),
                    openPanel = openedPanel.el.parentNode,
                    openContent = openPanel.querySelector(".panel-content");
                    
                hoverPanelTl[openedPanel.hoverTl].paused(false);
                hoverPanelTl[openedPanel.hoverTl].timeScale(3).reverse();
             
                TweenLite.to(openContent, 0.3, {height: 0, borderTopWidth: 0});
                TweenMax.to(openArrow, 0.3, {
                    rotation: 0,
                    transformOrigin: "25% 50%"
                });
                openPanel.classList.add("closed");
            }

            /* ============= If panel closed ============= */
            hoverPanelTl[i].paused(true);
            TweenLite.set(spacer, {width: 0});
            TweenLite.set(content, {height: "auto", borderTopWidth: "2px"});
            TweenLite.from(content, 0.5, {
                height: 0,
                borderTopWidth: 0,
                ease: Back.easeOut.config(1.4)
            });
            TweenMax.to(arrow, 0.5, {
                rotation: 90,
                transformOrigin: "25% 50%",
                ease: Back.easeOut.config(1.4)
            });
            panel.classList.remove("closed");
            openedPanel.el = el;
            openedPanel.hoverTl = i;
        }
    });
});

Array.prototype.forEach.call(item, function (el, i) {
    el.addEventListener("click", function () {
        console.log("The " + el.innerText + " button was clicked.");
    });
});