如何在引导程序中正确制作div内的折叠按钮?

我试图为我的报价容器制作一个折叠按钮,但当我单击它时,第一次单击时,什么也没有发生,但当再次单击时,整个div消失了?我想我正确地遵循了这里的样本? getbootstrap

在我的小提琴里,我的折叠按钮减号(-)也不起作用。但在我的谷歌chrome浏览器中可以吗?当我崩溃时,当它崩溃时,我是否也可以换成另一个fontawese图标?当塌陷/隐藏时,负号变为正号? 这是我的代码和js-fiddle: JSFIDDLE

HTML格式

<div class="quote-box" id="collapse-quote">
  <div class="text">
    asdasd
  </div>

  <div class="buttons">

    <button class="button" id="twitter-button"><a title="Tweet this quote!" target="_blank"> tweet
      <i class="fa fa-twitter"></i>
    </a></button>

    <button class="button" id="facebook-button"><a title="Share this quote!" target="_blank">share
      <i class="fa fa-facebook"></i>
    </a></button>

    <button class="button" id="close-open" type="button" data-toggle="collapse" data-target="#collapse-quote" aria-expanded="false" aria-controls="collapse-quote">
      <i class="fa fa-minus"></i>
    </button>
  </div>

</div>

供应链支持系统

.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 */
}

我做错了什么?我为一个钮扣修了几个小时。