<div class="container d-flex h-100 align-content-center justify-content-center">
<div class="toggle-bar position-relative d-flex flex-column ">
  <div class="d-flex align-content-center justify-content-center">
    <div class="d-flex toggle-button diamond pos0 align-content-center">
      <ion-icon name="add" size="large"></ion-icon>
    </div>
  </div>
  <div class="d-flex p-3 collapse-bar flex-column">
    <div class="d-flex justify-content-center">
      <div class="collapsible-item diamond pos1">
        <ion-icon name="contact" size="large"></ion-icon>
      </div>
    </div>
    <div class="d-flex justify-content-center">
      <div class="collapsible-item diamond pos2"><ion-icon name="logo-model-s" size="large"></ion-icon></div>
    </div>
    <div class="d-flex justify-content-center">
      <div class="collapsible-item diamond pos3"><ion-icon name="card" size="large"></ion-icon></div>
    </div>
    <div class="d-flex justify-content-center">
      <div class="collapsible-item diamond pos4"><ion-icon name="albums" size="large"></ion-icon></div>
    </div>
    <div class="d-flex justify-content-center">
      <div class="collapsible-item diamond pos5"><ion-icon name="albums" size="large"></ion-icon></div>
    </div>
    <div class="d-flex justify-content-center">
      <div class="collapsible-item diamond pos6"><ion-icon name="albums" size="large"></ion-icon></div>
    </div>
  </div>
  
</div>
</div>

body {
  height:100%;
  background: var(--dark);
}

ion-icon{
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
}
.toggle-bar {
  width: 200px;
}

.toggle-button {
  width:80px;
  height:80px;
  padding: 1.5em;
  z-index:100;
  transition: 1s;
  -webkit-transition: 1s;
  animation: shine 5s infinite;
  -webkit-animation: shine 5s infinite;
  background: #0cebeb;  /* fallback for old browsers */
  background: -webkit-linear-gradient(to right, #29ffc6, #20e3b2, #0cebeb);  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to right, #29ffc6, #20e3b2, #0cebeb); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
   background-size: 400% 400%;
  -webkit-background-size: 400% 400%;
}

.toggle-button:hover {
  background: #0cebeb;  /* fallback for old browsers */
  background: -webkit-linear-gradient(45deg, #29ffc6, #20e3b2);  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(45deg, #29ffc6, #20e3b2); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  transition: 0.5s;
   -webkit-transition: 0.5s;
  
}


@keyframes shine {
  50% {
    background-position:100% 0;
  }
}
@-webkit-keyframes shine {
  50% {
    background-position: 100% 0;
  }
}

.collapsible-item {
  background: rgb(13,190,130);  /* fallback for old browsers */
  padding: 1em;
  width:64px;
  height:64px;
  transition: 0.5s;
  -webkit-transition: 0.5s;
}

.collapsible-item:hover {
  background: rgb(22,210,128);
}

.collapsible-item:active {
  background: rgb(220,230,128);
  transition: 0.3s;
  -webkit-transition: 0.3s;
}

.diamond {
  position: absolute;
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  cursor: pointer;
  box-shadow: 1px 4px 10px #101010;
  
}

.closed {
  top: 20px !important;
  left: 68px !important;
  z-index:1;
  transition: 0.5s;
  -webkit-transition: 0.5s;
}

.pos0{
  top: 16px;
}

.pos1 {
  top: 83px;
  left:20px;
}

.pos2 {
  top:83px;
  left: 116px;
}

.pos3 {
  top:130px;
  left: 68px;
}

.pos4 {
  top:177px;
  left:20px;
}

.pos5 {
   top: 177px;
   left: 116px;
}

.pos6 {
  top:224px;
  left: 68px;
}

$(document).ready(function() {
  $('.toggle-bar .toggle-button').click(function() {

    var item = $('.toggle-bar .collapsible-item');
    if (item.hasClass('closed')) {
      item.removeClass('closed');
    }
    else {
      item.addClass('closed');
    }
  }); 
});