div内の折りたたみボタンをブートストラップで正しく作成する方法は？

Question

私の見積もりコンテナの折りたたみボタンを作るのは難しいですが、クリックすると最初のクリックで何も起こりませんが、もう一度クリックするとdiv全体が消えますか？私はここにサンプルを正しく追いかけていると思いますか？ getbootstrap

また、私のフィドルで私の崩壊ボタンマイナス（ - ）は機能していません。しかし、私のGoogle Chromeのブラウザでそれは大丈夫ですか？私が崩壊したとき、それが崩壊したときに別のフォントワームのアイコンに変更することも可能でしょうか？マイナスは崩壊/隠れたときにプラスになりますか？ これは私のコードとJSのフィドルです： 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> 

SCSS

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

私が間違って何をしているのですか？私は何時間もボタンを固定していました。

Answer 1

私のために働く。私がしたのはjquery-2.2.3.min.jsの参照を削除し、bootstrap.min.jsをhttpsに変更しました。

その他の問題もあります。Fiddleをご覧ください。

CSS

.quote-box { 
    text-align: center; 
    position: relative; 
    border-radius: 4.5px; 
    border: solid black 1px; 
    width: 50%; 
    padding: 10%; 
    margin: 10% auto auto auto; /* center the box */ 
} 

HTML、あなたはdivの上崩壊クラスを欠落していた、とあなたはすべてのボタンを折りたたむ場合も、どのようにそれらに戻ってもらうことになっていますか？

<div class="quote-box"> 
    <div class="text collapse" id="collapse-quote"> 
     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>