CODEWITHSUNDEEP
javascriptjquerycsstwitter-bootstrap-3
Perspolis
Perspolis

Reputation: 862

jQuery bootstrap multiple collapse not work

I need to collapse multiple button and div using jQuery and bootstrap like this :

HTML:

<button id="button" type="button" class="btn btn-primary" data-toggle="collapse" data-target="#demo"> <span class="fa fa-collapse-down"></span> Show</button>
<div id="demo" class="collapse">
    <ol class="list-group">
        <li class="list-group-item">Warrior</li>
        <li class="list-group-item">Adventurer</li>
        <li class="list-group-item">Mage</li>
    </ol>
</div>
<BR><BR><BR>
<button id="button" type="button" class="btn btn-primary" data-toggle="collapse" data-target="#demo"> <span class="fa fa-collapse-down"></span> Show</button>
<div id="demo" class="collapse">
    <ol class="list-group">
        <li class="list-group-item">Warrior</li>
        <li class="list-group-item">Adventurer</li>
        <li class="list-group-item">Mage</li>
    </ol>
</div>

JS:

$(function () {
    $('#demo').on('hide.bs.collapse', function () {
        $('#button').html('<span class="fa fa-collapse-down"></span> Show');
    })
    $('#demo').on('show.bs.collapse', function () {
        $('#button').html('<span class="fa fa-collapse-up"></span> Hide');
    })
})

but in action only work one button and div. how do can i fix this problem?!

DEMO

Upvotes: 0

Views: 1555

Answers (4)

vm7488
vm7488

Reputation: 136

You can't have the same id="button" (or any other ID) twice on two different elements in a file.

This should be the code that you are looking for, but it may be cumbersome to have too many levels of JS so you must map it to a class instead, and then use the parent() function

http://jsfiddle.net/mu4whyb6/

Upvotes: 0

Taylor Stevens
Taylor Stevens

Reputation: 436

If you only want one div open at a time you might be able to achieve this very easily using the data-toggle-="tabs" attribute on buttons inside of a list with the "nav" class. You can read more about this in the bootstrap JavaScript documentation.

Upvotes: 0

Bryan S
Bryan S

Reputation: 15

Use different id in the data-target. For example use #demo1 and #demo2 respectively.

Upvotes: 1

Shehary
Shehary

Reputation: 9992

Answer Edited as per Dynamic div & Button

<button id="button" type="button" class="btn btn-primary" data-toggle="collapse" data-start="open" data-target="#demo" data-close-text="Hide" data-open-text="Show"> <span class="fa fa-collapse-down"></span> Show</button>
<div id="demo" class="collapse">
    <ol class="list-group">
        <li class="list-group-item">Warrior</li>
        <li class="list-group-item">Adventurer</li>
        <li class="list-group-item">Mage</li>
    </ol>
</div>
<BR><BR><BR>
<button id="button" type="button" class="btn btn-primary" data-toggle="collapse" data-start="close" data-target="#demo" data-close-text="Hide" data-open-text="Show"> <span class="fa fa-collapse-down"></span> Show</button>
<div id="demo" class="collapse">
    <ol class="list-group">
        <li class="list-group-item">Warrior</li>
        <li class="list-group-item">Adventurer</li>
        <li class="list-group-item">Mage</li>
    </ol>
</div>


// toggle content on click
$('[data-toggle="collapse"]').click(function () {
    if ($(this).attr('data-start') == 'open') {
        $(this).html($(this).attr('data-close-text'));
    } else {
        $(this).html($(this).attr('data-open-text'));
    }
    $(this).attr('data-start', $(this).attr('data-start') == 'open' ? 'close' : 'open');
});

// set initial content
$('[data-toggle="collapse"]').each(function () {
    if ($(this).attr('data-start') == "open") {
        $(this).html($(this).attr('data-open-text'));
    } else {
        $(this).html($(this).attr('data-close-text'));
    }
});

Upvotes: 0

Related Questions