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?

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?

• javascript
• jquery
• twitter-bootstrap
• twitter-bootstrap-3
• bootstrap-accordion

Share Improve this question Follow edited Jun 27, 2017 at 16:50 JNYRanger 7,0971212 gold badges5454 silver badges8484 bronze badges asked Jun 27, 2017 at 16:16 Kynan PachecoKynan Pacheco 20722 gold badges33 silver badges1010 bronze badges 2

• I believe the problem is that slideDown and slideUp apply to hidden elements too, your toggle, may have hidden elements causing the individual buttons to appear to have no effect. Simply use .hide() and .show() optionally with the .hide('slow') parameter to have the same animated effect. – pokeybit Commented Jun 27, 2017 at 16:44
• ^ This worked the same way, – Kynan Pacheco Commented Jun 27, 2017 at 17:29

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 7

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./bootstrap/bootstrap_ref_js_collapse.asp