How to make collapse button inside div properly in bootstrap? - html

Question

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? getbootstrap
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:
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 */
}
What am I doing wrong? I been fixing for a button for hours.

Answer 1

It works for me. All I did was remove your jquery-2.2.3.min.js reference and changed your bootstrap.min.js to use https.
You have other issues too, check out this 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, you were missing the collapse class on the div, and also if you collapse all the buttons how are you supposed to get back to them?
<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>