title: Floating buttons in HTML
body: <p>I am trying to get a floating navigation bar done where it always shows just one button and on click it would open up the rest under it. I am using bootstrap collapse and collapse show classes . With this it should be working like on the click on first button it would show the rests and when you click on it again it should minimize and not show the other buttons under it.Below is the code for it.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#presentation {
    width: 480px;
    height: 120px;
    padding: 20px;
    margin: auto;
    background: #FFF;
    margin-top: 10px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
    transition: all 0.3s;
    border-radius: 3px;
  }
  
  #presentation:hover {
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
    transition: all 0.3s;
    transform: translateZ(10px);
  }
  
  #floating-button {
    width: 55px;
    height: 55px;
    border-radius: 50%;
    background: gray;
    position: fixed;
    bottom: 30px;
    right: 30px;
    cursor: pointer;
    box-shadow: 0px 2px 5px #666;
  }
  
  .plus {
    color: white;
    position: absolute;
    top: 0;
    display: block;
    bottom: 0;
    left: 0;
    right: 0;
    text-align: center;
    padding: 0;
    margin: 0;
    line-height: 55px;
    font-size: 38px;
    font-family: 'Roboto';
    font-weight: 300;
    animation: plus-out 0.3s;
    transition: all 0.3s;
  }
  
  #container-floating {
    position: fixed;
    width: 70px;
    height: 70px;
    bottom: 30px;
    right: 30px;
    z-index: 50px;
  }
  
  #container-floating:hover {
    height: 400px;
    width: 90px;
    padding: 30px;
  }
  
  #container-floating:hover .plus {
    animation: plus-in 0.15s linear;
    animation-fill-mode: forwards;
  }
  
  .edit {
    position: absolute;
    top: 0;
    display: block;
    bottom: 0;
    left: 0;
    display: block;
    right: 0;
    padding: 0;
    opacity: 0;
    margin: auto;
    line-height: 65px;
    transform: rotateZ(-70deg);
    transition: all 0.3s;
    animation: edit-out 0.3s;
  }
  
  #container-floating:hover .edit {
    animation: edit-in 0.2s;
    animation-delay: 0.1s;
    animation-fill-mode: forwards;
  }
  
  @keyframes edit-in {
    from {
      opacity: 0;
      transform: rotateZ(-70deg);
    }
    to {
      opacity: 1;
      transform: rotateZ(0deg);
    }
  }
  
  @keyframes edit-out {
    from {
      opacity: 1;
      transform: rotateZ(0deg);
    }
    to {
      opacity: 0;
      transform: rotateZ(-70deg);
    }
  }
  
  @keyframes plus-in {
    from {
      opacity: 1;
      transform: rotateZ(0deg);
    }
    to {
      opacity: 0;
      transform: rotateZ(180deg);
    }
  }
  
  @keyframes plus-out {
    from {
      opacity: 0;
      transform: rotateZ(180deg);
    }
    to {
      opacity: 1;
      transform: rotateZ(0deg);
    }
  }
  
  .nds {
    width: 55px;
    height: 55px;
    border-radius: 50%;
    position: fixed;
    z-index: 300;
    transform: scale(0);
    cursor: pointer;
  }
  
  .nd1 {
    background: gray;
    right: 40px;
    bottom: 120px;
   /*  animation-delay: 0.2s;
    animation: bounce-out-nds 0.3s linear;*/
    animation-fill-mode: forwards;
    } 
  
  .nd3 {
    background: #3c80f6;
    right: 40px;
    bottom: 180px;
   /*  animation-delay: 0.15s;
    animation: bounce-out-nds 0.15s linear;*/
    animation-fill-mode: forwards; 
  }
  
  .nd4 {
    background: #ba68c8;
    right: 40px;
    bottom: 240px;
    /* animation-delay: 0.1s;
    animation: bounce-out-nds 0.1s linear;*/
    animation-fill-mode: forwards; 
  }
  
  .nd5 {
    background-image: url('https://lh3.googleusercontent.com/-X-aQXHatDQY/Uy86XLOyEdI/AAAAAAAAAF0/TBEZvkCnLVE/w140-h140-p/fb3a11ae-1fb4-4c31-b2b9-bf0cfa835c27');
    background-size: 100%;
    right: 40px;
    bottom: 300px;
    animation-delay: 0.08s;
    animation: bounce-out-nds 0.1s linear;
    animation-fill-mode: forwards;
  }
  
  @keyframes bounce-nds {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
      transform: scale(1);
    }
  }
  
  @keyframes bounce-out-nds {
    from {
      opacity: 1;
      transform: scale(1);
    }
    to {
      opacity: 0;
      transform: scale(0);
    }
  }
  
  #container-floating:checked {  
    margin-top:0;
    opacity:1;
  }
  
  #container-floating:hover .nds {
    animation: bounce-nds 0.1s linear;
    animation-fill-mode: forwards;
  }
  
  #container-floating:hover .nd3 {
    animation-delay: 0.08s;
  }
  
  #container-floating:hover .nd4 {
    animation-delay: 0.15s;
  }
  
  #container-floating:hover .nd5 {
    animation-delay: 0.2s;
  }
  
  .letter {
    font-size: 23px;
    font-family: 'Roboto';
    color: white;
    position: absolute;
    left: 0;
    right: 0;
    margin: 0;
    top: 0;
    bottom: 0;
    text-align: center;
    line-height: 40px;
  }
  
  .reminder {
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    top: 0;
    bottom: 0;
    line-height: 40px;
  }
  
  .profile {
    border-radius: 50%;
    width: 40px;
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    right: 20px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://code.jquery.com/jquery-3.2.1.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/&gt;
  &lt;link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/&gt;
  &lt;div id="container-floating"&gt;
  &lt;div id="floatingnav" class="collapse show"&gt;
      &lt;div class="nd1 nds" data-toggle="tooltip" data-placement="left"&gt;
     &lt;i id="locateplace" class="fa fa-search fa-stack-1x fa-inverse fa-2x" style="top:12px" ng-click="navMenuController($event);" role="button" tabindex="0"&gt;&lt;/i&gt;
      &lt;/div&gt;
      &lt;div class="nd3 nds" data-toggle="tooltip" data-placement="left"&gt;
     &lt;i id="locateplace" class="fa fa-search fa-stack-1x fa-inverse fa-2x" style="top:12px" ng-click="navMenuController($event);" role="button" tabindex="0"&gt;&lt;/i&gt;
      &lt;/div&gt;
      &lt;div class="nd4 nds" data-toggle="tooltip" data-placement="left"&gt;
     &lt;i id="locateplace" class="fa fa-search fa-stack-1x fa-inverse fa-2x" style="top:12px" ng-click="navMenuController($event);" role="button" tabindex="0"&gt;&lt;/i&gt;
      &lt;/div&gt;
      &lt;/div&gt;
      &lt;div id="floating-button" data-toggle="collapse" data-target="#floatingnav"  data-placement="left"&gt;
          &lt;i id="legend" class="fa fa-tasks fa-stack-1x fa-inverse fa-2x" style="top:12px" role="button" tabindex="0"&gt;&lt;/i&gt;
      &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>