Bootstrap tutorial 19 – Collapse



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”

  1. 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.

  2. 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>

Leave a Reply