Expand All & Collapse All Buttons using Bootstrap Collapse

Question

I have a a few (8) collapsible fields using bootstrap that follow this:

        <div id='toggle'>
            <button type='button' data-toggle='collapse' data-target='#target' id='toggle'>Title</button>
        </div>
        <div id='target' class='collapse'>
            <p class='stuff'>Some Stuff Here</p>
        </div>

This works fine, but I want to have expand all and collapse all buttons. I figured that by adding two other buttons that call functions during the onClick event, then I could make them expand and collapse. I did this using:

<button type="button" onclick="expand()">Expand All</button>
<button type="button" onclick="collapse()">Collapse All</button>

That call these functions:

function expand() {
    $('.stuff').slideDown(400);
    $('.collapse').slideDown(400);
}

function collapse() {
    $('.stuff').slideUp(400);
    $('.collapse').slideUp(400);
}

These are half functional. The problem is that once the expand all and collapse all buttons are used the bootstrap buttons no longer not respond. Clicking collapse all makes the toggle only collapse, and clicking expand all makes the toggle only expand.

Is there a better way to do this, or a way to make my solution functional?

Solution

Did some research on [Bootstrap via W3][1] and found that I could change my js/jquery functions to:

function expand() {
   $('.collapse').collapse('show');
}
function collapse() {
   $('.collapse').collapse('hide');
}

Bootstrap has the .collapse() method that could be used and solved the functionality issues. Thanks for the Responses!
[1]: https://www.w3schools.com/bootstrap/bootstrap_ref_js_collapse.asp

Comments

[Ashley K]

I'm using your code, but the collapse feature doesn't work. Has anyone else run into this issue?

[Kynan Pacheco]

This might seem like a stupid question but do you have the proper includes?

[Kynan Pacheco]

<link rel="stylesheet" href="maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.‌​min.css"> <script src="maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/…>