Deprecated: Function create_function() is deprecated in /var/www/vhosts/eduardoarellano.com/d4mations.com/wp-content/plugins/wp-automatic/wp-automatic.php on line 70
Bootstrap tutorial 19 – Collapse | D4mations.com
  • Saturday , 23 January 2021

Bootstrap tutorial 19 – Collapse

Code Canyon
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

3d Ocean

Related Posts

22 Comments

  1. robinhook
    November 28, 2020 at 22:25

    Great Tutorial!
    You helped me a lot, thank you.

  2. Joey Alter
    November 28, 2020 at 22:25

    Thank's for the help <3

  3. Назар Лойко
    November 28, 2020 at 22:25

    Hi, htlp please, i want to hide collapse when i click on other place in page, for example like in modal

  4. Tarik Hacialiogullari
    November 28, 2020 at 22:25

    Hi brothers and sisters, the 'Well' class is renamed in Bootstrap 4 to 'Card'. So you know 😀

  5. Eduardo Passero
    November 28, 2020 at 22:25

    Thanks! Helped a lot

  6. Jon Dyason
    November 28, 2020 at 22:25

    thanks Quentin.

  7. Patricia B
    November 28, 2020 at 22:25

    When I click on refresh, I can see the text by default.The text should be hidden by default.

  8. Bryan Thomas xo
    November 28, 2020 at 22:25

    how can I hide the collaose, clicking on anywhere of the page? I mean hide the collapse on the next click…

  9. 張羿訢
    November 28, 2020 at 22:25

    thanks Quentin

  10. Jeff Manoj
    November 28, 2020 at 22:25

    Is this Bootstrap v4?

  11. TutorialLab
    November 28, 2020 at 22:25

    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.

  12. John Benjamin Brittan
    November 28, 2020 at 22:25

    thank you 🙂 it worked. just needed to add jquery.min.js over bootstap.min.js at bottom of body. awesomo

  13. Mohamed Khaled
    November 28, 2020 at 22:25

    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>

  14. KALEIDO jess
    November 28, 2020 at 22:25

    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 🙂

  15. Dustin Keppler
    November 28, 2020 at 22:25

    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!

  16. Zymusss
    November 28, 2020 at 22:25

    thanks, well explained !

  17. David Rogers
    November 28, 2020 at 22:25

    Is there a way to add a hover option as opposed to just clicking to collapse??

  18. Farid Ahmadi
    November 28, 2020 at 22:25

    dude, i just love your bootstrap tutorials.
    simple, to the point and easy to follow

  19. Cynthia Rajendran
    November 28, 2020 at 22:25

    My buttons don't work either

  20. Zoltan Kohalmy
    November 28, 2020 at 22:25

    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

  21. Tom Lawrence
    November 28, 2020 at 22:25

    @Skaterlunatic

  22. MRS
    November 28, 2020 at 22:25

    I have a question, where did the  OOP php file come from? I can't seem to find it. Did you create it yourself?

Leave A Comment

You must be logged in to post a comment.