title: How to make collapse button inside div properly in bootstrap?
body: <p>I am tring to make a collapse button for my quote container but when I click it, on the first click, nothing happens but when I click again, the whole div disappears? I think I am following correctly the sample here? <a href="http://v4-alpha.getbootstrap.com/components/collapse/#collapsehide/" rel="nofollow">getbootstrap</a></p>
  
  <p>Also in my fiddle my collapse button the minus(-) is not functioning. But in my google chrome browser it is ok? Is it also possible that when I collapse, when it's collapse I can change to another fontawesome icon? the minus becomes plus when collapse/hidden?
  this is my code and js fiddle:
  <a href="https://jsfiddle.net/iamglenbacs/e5dr6m7z/" rel="nofollow">JSFIDDLE</a></p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div class="quote-box" id="collapse-quote"&gt;
    &lt;div class="text"&gt;
      asdasd
    &lt;/div&gt;
  
    &lt;div class="buttons"&gt;
  
      &lt;button class="button" id="twitter-button"&gt;&lt;a title="Tweet this quote!" target="_blank"&gt; tweet
        &lt;i class="fa fa-twitter"&gt;&lt;/i&gt;
      &lt;/a&gt;&lt;/button&gt;
  
      &lt;button class="button" id="facebook-button"&gt;&lt;a title="Share this quote!" target="_blank"&gt;share
        &lt;i class="fa fa-facebook"&gt;&lt;/i&gt;
      &lt;/a&gt;&lt;/button&gt;
  
      &lt;button class="button" id="close-open" type="button" data-toggle="collapse" data-target="#collapse-quote" aria-expanded="false" aria-controls="collapse-quote"&gt;
        &lt;i class="fa fa-minus"&gt;&lt;/i&gt;
      &lt;/button&gt;
    &lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>scss </p>
  
  <pre><code>.quote-box {
    text-align: center;
    position: relative;
    border-radius: 4.5px;
    border: solid black 1px;
    display: table;
    width: 50%;
    height: 500px;
    padding: 10%;
    margin: 10% auto auto auto;
    /* center the box */
  }
  
  .quote-box .buttons {
    top: 0;
    /* align to top */
    left: 0;
    width: 100%;
    position: absolute;
    /* out of the document flow and you can move*/
    height: 100%;
    text-align: left;
    padding: 1%;
    box-sizing: border-box;
  }
  
  
  /* sample: uncomment if you want to align on right 
  #twitter-button{
    float: right;
  } 
  */
  
  #close-open {
    /* float the collapse button to the right */
    float: right;
  }
  
  .fa-minus {
    color: #11A5D6;
    /* color for the button */
  }
  </code></pre>
  
  <p>What am I doing wrong? I been fixing for a button for hours.</p>