[ad_1]
https://i.ytimg.com/vi/Fqgr2ePX51A/hqdefault.jpg
In this tutorial I show you how to use the JavaScript Collapse feature in Bootstrap.
Useful links:
———————————–
Don’t forget to subscribe:
www.youtube.com/QuentinWatt
Follow me on Twitter:
www.twitter.com/QuentinWatt
Follow me on Facebook:
www.facebook.com/quentin.watt
Feel free to donate:
https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=CH68DBULMJ37N
————————————
Original source
22 responses to “Bootstrap tutorial 19 – Collapse”
Great Tutorial!
You helped me a lot, thank you.
Thank's for the help <3
Hi, htlp please, i want to hide collapse when i click on other place in page, for example like in modal
Hi brothers and sisters, the 'Well' class is renamed in Bootstrap 4 to 'Card'. So you know 😀
Thanks! Helped a lot
thanks Quentin.
When I click on refresh, I can see the text by default.The text should be hidden by default.
how can I hide the collaose, clicking on anywhere of the page? I mean hide the collapse on the next click…
thanks Quentin
Is this Bootstrap v4?
you should add jquery.min.js file at the end of the page, collapse hide will then work, if not inserted at the end of all JS files, after collapse, it will not hide the content, will only open it and hide will not work. simple tip, I was just debugging my code and go through this bug.
thank you 🙂 it worked. just needed to add jquery.min.js over bootstap.min.js at bottom of body. awesomo
such an awesome video , but I'd like to ask a question , how to make the list show up on the right side of the button ?
here is my code :
<div class="container container-4">
<p>
<a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
Mission
</a>
<a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
Vision
</a>
<a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
Goals
</a>
</p>
<div class="collapse" id="collapseExample">
<div class="card card-block card-pa">
<p>Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.</p>
</div>
</div>
</div>
Thanks, I realized it was because of the script that I hadn’t included, maybe that’s why it wasn’t working. Works just fine now 🙂
Strange, but the code wasn't working for me… I tried the code from the docs and looked like it was needing the "card' div inside "collapse". Good to go now!
thanks, well explained !
Is there a way to add a hover option as opposed to just clicking to collapse??
dude, i just love your bootstrap tutorials.
simple, to the point and easy to follow
My buttons don't work either
for some reason when I copy and paste the code from bootstrap, collapse works, what you did here does nothing. Can't see where I miss it. Im at 3:23 in this vid.
Thanks
@Skaterlunatic
I have a question, where did the OOP php file come from? I can't seem to find it. Did you create it yourself?