Changing from one accordion to another after clicking on a submit button inside one accordion

Question

Here is the code:

<div class="panel-group" id="accordion">
    <div class="panel panel-default" id="panel1">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
                    Collapsible Group Item #1
                </a>
            </h4>
        </div>
        <div id="collapseOne" class="panel-collapse collapse in">
            <div class="panel-body">
                Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
            </div>
        </div>
    </div>
    <div class="panel panel-default" id="panel2">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
                    Collapsible Group Item #2
                </a>
            </h4>
        </div>
        <div id="collapseTwo" class="panel-collapse collapse">
            <div class="panel-body">
                Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
            </div>
        </div>
    </div>
    <div class="panel panel-default" id="panel3">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
                    Collapsible Group Item #3
                </a>
            </h4>
        </div>
        <div id="collapseThree" class="panel-collapse collapse">
            <div class="panel-body">
                Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
            </div>
        </div>
    </div>
</div>




<!-- Post Info -->
<div style='position: fixed; bottom: 0; left: 0; background: lightgray; width: 100%;'>
    About this SO Question: <a href='http://stackoverflow.com/q/19936572/1366033'>Bootstrap3 Bind Collapse</a><br/>
    Find documentation: <a href='http://getbootstrap.com/javascript/#collapse-usage'>Bootstrap Collapse Usage</a><br/>
    Fork This Skeleton Here <a href='http://jsfiddle.net/KyleMit/kcpma/'>Bootrsap 3.0 Skeleton</a><br/>
</div>

Jsfiddle here. I tried to do it by adding and removing the in class. It is working for the first time and when tried doing second time it is not.

I've eddited your question. The problem is that i don't see any submit button in your accordion and another problem is that i don't see where exactly you've tried to add and remove the class. Can you update your jsfiddle with the complete code? — paulalexandru, Dec 05 '14 at 17:36

score 1 · Answer 1 · answered Dec 06 '14 at 12:42

Inside the panel you can use a button or a element to open an other panel by using the data-attributes as follows:

<button class="btn btn-default" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">Open panel 2</button>
<a class="btn btn-default" data-toggle="collapse" data-parent="#accordion" href="#collapseThree">Open panel 3</a>

You ask for a submit, after a submit your page reloads (and the active panel before the reload is unknown):

Now you can set the submit action to the location hash: <form id="theform" action="#collapseThree">, notice that this does not trigger a reload. After that you can open the panel based on the location hash:

$(window).on( 'hashchange', function(e) { $(window.location.hash).collapse(); });

For the situation that you trigger a page reload, for instance when setting the form action to a URL form id="theform" action="yourpage.html#collapseThree"> you can open the panel based on the location hash too:

if(window.location.hash) {
$(window.location.hash).collapse();
}

Finally you can also prevent the form form reloading after submit with e.preventDefault();:

$('#theform').on('submit', function(e){
    e.preventDefault();
    $('#collapseThree').collapse();
});

Changing from one accordion to another after clicking on a submit button inside one accordion

1 Answers1