CODEWITHSUNDEEP
jquerytwitter-bootstrapaccordion
renoproc
renoproc

Reputation: 11

Bootstrap general button to toggle accordions

I'm new on jQuery and try to setup a general expand/collapse button for the twitter bootstrap accordion plugin. In my code I've an array div's ids I want to expand/collaspe, and the loop I use works well to do that.

But if I expand/collaspe manually accordions by clicking accordion-heading link the concerned divs don't expand or collapse anymore, even if the "in" class is well added.

Here is my loop :

for(i=0;i<selectedRows.length;i++){
    if($("#"+a).find("div#collapse_"+selectedRows[i]+'.in').length==1)
        $("#"+a).find("div#collapse_"+selectedRows[i]).removeClass("in");
    else
        $("#"+a).find("div#collapse_"+selectedRows[i]).addClass("in");
}

Can you see what's wrong ?

Thanks a lot.

Edit : to complete here is the code for an accordion

<div id="accordion_4" class="accordion">
<div class="accordion-group">
    <divclass="accordion-heading">
        <a href="#collapse_4" data-parent="#accordion_4" data-toggle="collapse" class="accordion-toggle">
    Details</a>
    </div>
    <div class="accordion-body collapse in" id="collapse_4">
        <div class="accordion-inner">
            Collapsible group
        </div>
    </div>
</div>

Here is the code for the global button :

<i onclick="toggleExpand('batchForm');" class="btn">Collaps/expand details</i>

For the toggleExpand function I send the id of the form I use to see which rows are checked (checkbox) to be able to expand or collapse them in a click.

Upvotes: 1

Views: 5987

Answers (3)

Tom Rudge
Tom Rudge

Reputation: 3272

Here is a more simple answer - just add...

            $(document).on('click.collapse.data-api', 'button[data-toggle=collapse]', expand);

to your bootstrap.js around line 636 under COLLAPSE DATA-API section.

Upvotes: 1

renoproc
renoproc

Reputation: 11

finally I use this function, which do the trick, a little bit slowly on 34 checkboxes but works. But if someone found something faster, I'm insterested.

    function toggleExpand(a){
        $("#"+a).find("input:checkbox:checked").each(function( index ) {
            $("#"+a+" .accordion .accordion-toggle").eq(index).click();
        });
    }

Upvotes: 0

charlietfl
charlietfl

Reputation: 171669

You would be better off not modifying any class of the accordion, and interacting with it by triggering click on the appropriate heading:

Example :

var $accordLinks=$('.accordion .accordion-toggle');

$('.btn').click(function(){
   $accordLinks.eq( $(this).index()).click()
})

DEMO: http://jsfiddle.net/RB7cT/

Upvotes: 0

Related Questions