Saturday 29 August 2015

Bootstrap accordion scroll to top of active panel heading

scroll Top when Collapse (accordion) opened ... Click icon in jQuery UI accordion heading to open Bootstrap modal, but prevent accordion collapse event.

links to panels:
<ul>
    <li><a data-toggle="collapse" data-parent="#accordion" href="#panel1">Panel1</a>
    </li>
    <li><a data-toggle="collapse" data-parent="#accordion" href="#panel2">Panel2</a>
    </li>
    <li>
        <a data-toggle="collapse" data-parent="#accordion" href="#panel3" ">Panel3</a></li>
</ul>

Panels:
<div class="panel-group" id="accordion">
    <div class="panel panel-default">
        <div class="panel-heading">
             <h4 class="panel-title">
    <a class="accordion-toggle aWeight active" data-toggle="collapse" data-parent="#accordion" href="#panel1">
    Panel 1
    </a>
    </h4>

        </div>
        <div id="panel1" class="panel-collapse collapse in">
            <div class="panel-body">Anim pariatur...</div>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading">
             <h4 class="panel-title">
    <a class="accordion-toggle aFitness" data-toggle="collapse" data-parent="#accordion" href="#panel2">
    Panel 2
    </a>
    </h4>

        </div>
        <div id="panel2" class="panel-collapse collapse">
            <div class="panel-body">Anim pariatur...</div>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading">
             <h4 class="panel-title">
    <a class="accordion-toggle aFitness" data-toggle="collapse" data-parent="#accordion" href="#panel3">
    Panel 3
    </a>
    </h4>

        </div>
        <div id="panel3" class="panel-collapse collapse">
            <div class="panel-body">Anim pariatur...</div>
        </div>
    </div>
</div>


links to panels: and lastly I'm using this script to toggle the active class:
$(function () {
    $('.accordion').on('show', function (e) {
        $(e.target).prev('.accordion-heading').find('.accordion-toggle').addClass('active');
    });
    $('.accordion').on('hide', function (e) {
        $(this).find('.accordion-toggle').not($(e.target)).removeClass('active');
    });
});

No comments:

Post a Comment