<body>
  <div class="sidebar">
    
    <header class="profile-wrapper">
      <div class="profile">
        <div class="profile-pic"></div>
        <div class="profile-text">
          <h3>Jonas Hood</h3>
          <span>Executive of Awesome</span>
        </div>
      </div>
    </header>
    
    <section id="accordion" class="clients">
      <ul id="items">
        <li>
        <a href="#">Gruppe 1</a>
        <ul class="sub-items">
          <li>
            <a href="#">Biogen Idec Inc</a>
          </li>
          <li>
            <a href="#">Outotec OYJ</a>
          </li>
          <li>
            <a href="#">Statoil ASA</a>
          </li>
        </ul>
        </li>
        <li>
        <a href="#">Gruppe 2</a>
        <ul class="sub-items">
          <li>
            <a href="#">Dassault Systemes SA</a>
          </li>
          <li>
            <a href="#">Neste Oil OYJ</a>
          </li>
        </ul>
        </li>
        <li>
        <a href="#">Gruppe 3</a>
        <ul class="sub-items">
          <li>
            <a href="#">Novo Nordisk A/S</a>
          </li>
          <li>
            <a href="#">Adidas AG</a>
          </li>
          <li>
            <a href="#">Umicore SA</a>
          </li>
          <li>
            <a href="#">Schneider Electric SA</a>
          </li>
        </ul>
        </li>
        <li>
        <a href="#">Gruppe 4</a>
        <ul class="sub-items">
          <li>
            <a href="#">Cisco Systems Inc</a>
          </li>
          <li>
            <a href="#">BASF SE</a>
          </li>
        </ul>
        </li>
      </ul>
    </section>
    
    <section class="task-bar">
      <div class="add">
        <div class="add-choice">
          <a href="#">Legg til gruppe</a>
          <a href="#">Legg til kunde</a>
        </div>
      </div>
    </section>
    
  </div>
</body>
@import url(http://weloveiconfonts.com/api/?family=entypo);

@font-face {
    font-weight: normal;
    font-style: normal;
    font-family: "fontello";
    src: url("https://github.com/cyletech/Accordion-Multi-Menu/raw/master/fonts/fontello.eot");
    src: url("https://github.com/cyletech/Accordion-Multi-Menu/raw/master/fonts/fontello.eot?#iefix") format('embedded-opentype'),
         url("https://github.com/cyletech/Accordion-Multi-Menu/raw/master/fonts/fontello.woff") format('woff'),
         url("https://github.com/cyletech/Accordion-Multi-Menu/raw/master/fonts/fontello.ttf") format('truetype'),
         url("https://github.com/cyletech/Accordion-Multi-Menu/raw/master/fonts/fontello.svg#fontello") format('svg');
}

ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

[class*="entypo-"]:before {
  font-family: 'entypo', sans-serif;
}

html {
  background: #f1f1ee;
  color: #333;
  font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 12px;
  -webkit-font-smoothing: antialiased;
  font-style, font-weight, letter-spacing, line-height, word-spacing: normal;
}

*, *:before, *:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

* {
  font-family: "Open Sans", sans-serif;
}

h3 {
  font-size: 16px;
  line-height: 20px;
  font-weight: 400;
}

a {
  text-decoration: none;
  font-weight: 200;
  color: #1A1A1A;
}

body {
  background: #f1f2f2;
}

.sidebar {
  width: 350px;
  height: 550px;
  background: #fff;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -125px;
  margin-top: -275px;
  box-shadow: 0px 1px 8px #BEBEBE;
  -webkit-box-shadow: 0px 1px 8px #BEBEBE;
  -moz-box-shadow: 0px 1px 8px #BEBEBE;
  border-radius: 3px;
}


/* Profile Section */

.profile-wrapper {
  height: 98px;
  background: #171717;
  border-bottom: 1px solid #ededed;
  border-radius: 3px 3px 0 0;
}

.profile {
  padding: 25px 20px;
  background: #171717;
  border-radius: 3px 3px 0 0;
}

.profile-pic {
  position: absolute;
  top: 12px;
  background: url('https://s3.amazonaws.com/uifaces/faces/twitter/kolage/128.jpg') no-repeat center center;
  background-size: 150%;
  border: solid 3px #FFF;
  -webkit-box-shadow: 0 0px 10px 0 rgba(0,0,0,0.1);
  box-shadow: 0 0px 10px 0 rgba(0,0,0,0.1);
  width: 70px;
  height: 70px;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
}

.profile-text {
  position: absolute;
  text-align: left;
  top: 8px;
  left: 105px;
}

.profile-text:after {
  clear: both;
}

.profile-text h3 {
  font-weight: bold;
  color: #F5F5F5;
}

.profile-text span {
  font-weight: 200;
  font-size: 14px;
  position: relative;
  top: -6px;
  color: #ededed;
}

/* Client Section */

#accordion {
  width: 100%;
}

#items > li > a {
    display: block;
    margin: 0 auto;
    width: 100%;
    text-indent: 22px;
    line-height: 45px;
}

#items > li > a::after {
    position: absolute;
    right: 30px;
    margin-top: 2px;
    font-family: "fontello";
}

#items > li > a::after {
    right: 30px;
    content: "\e801";
}

#items > li > a:lang(fa)::after {
    right: auto;
    left: 30px;
    content: "\e802";
}

#items > li > a:hover, #items > li > a.expanded {
    background-color: #171717;
    color: #fff;
    font-weight: 600;
    -webkit-transition: background-color .4s ease-in-out;
    -moz-transition: background-color .4s ease-in-out;
    -o-transition: background-color .4s ease-in-out;
    transition: background-color .4s ease-in-out;
}

#items > li > a.expanded::after {
    content: "\e803";
}

.sub-items {
  background: #ededed;
}

.sub-items > li:first-child > a {
    height: 34px;
}

.sub-items > li:last-child > a {
    height: 38px;
}

.sub-items a {
    position: relative;
    display: block;
    margin: 0 auto;
    width: 100%;
    text-indent: 24px;
    line-height: 39px;
}

.sub-items a:lang(fa) {
    border-right: 2px solid rgba(57, 198, 233, 0.3);
    border-left: none;
}

.sub-items > li:hover > a {
    color: #fff;
    background: #171717;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}

.sub-items {
    display: none;
}


/* Task Bar Section */

.task-bar {
  position: absolute;
  bottom: 0;
  height: 40px;
  width: 100%;
  background: #171717;
  border-top: 1px solid #ededed;
}

.add-choice {
  opacity: 0;
  position: absolute;
  bottom: 0px;
  left: 0;
  right: 0;
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}

.add-choice:hover {
  cursor: pointer;
}

.add-choice a {
  width: 100%;
  padding: 10px 20px;
  background: #171717;
  display: block;
  color: #fff;
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}

.add-choice a:hover {
  background: #6BC963;
  color: #171717;
}

.add {
  width: 40px;
  height: 40px;
  display: inline-block;
}

.add:after {
  width: 40px;
  height: 40px;
  content: "+";
  color: #fff;
  font-size: 24px;
  -webkit-font-smoothing: none;
  padding-left: 13px;
  line-height: 40px;
}

.choice-open {
  display: block;
  bottom: 40px;
  opacity: 1;
}
/* Accordion Plugin
 * Developed by Alireza Eskandarpour Shoferi (@cyletech)
 * http://about.me/cyletech
 * Fork on GitHub (https://github.com/cyletech/Accordion-Multi-Menu)
 *
 * (c) 2013 Alireza Eskandarpour Shoferi
 * Released under the MIT license
 * https://opensource.org/licenses/MIT
 */
	$("#items > li > a").click(function(e){
		e.preventDefault();
		if($(this).hasClass("expanded"))
		{
			$(this).removeClass("expanded");
			$(this).parent().children("ul").stop(true,true).slideUp("normal");
		}
		else
		{
			$("#items a.expanded").removeClass("expanded");
			$(this).addClass("expanded");
			$(".sub-items").filter(":visible").slideUp("normal");
			$(this).parent().children("ul").stop(true,true).slideDown("normal");
		}
	});

	$(".sub-items a").click(function(){
		$(".sub-items a").removeClass("current");
		$(this).addClass("current");
	});

$(".add-choice").click(function(e){
		e.preventDefault();
		if($(this).hasClass("choice-open"))
		{
			$(this).removeClass("choice-open");
		}
		else
		{
			$(".add-choice").removeClass("choice-open");
			$(this).addClass("choice-open");
		}
	});

$(document).mouseup(function (e)
{
    var container = $(".add-choice");

    if (!container.is(e.target) // if the target of the click isn't the container...
        && container.has(e.target).length === 0) // ... nor a descendant of the container
    {
        $(".add-choice").removeClass("choice-open");
    }
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js