CODEWITHSUNDEEP
jquerytwitter-bootstrapaccordiontwitter-bootstrap-3scrolltop
bxmarg
bxmarg

Reputation: 23

Bootstrap 3 collapse scrollTop

I'm having a little trouble with Bootstrap 3's accordion.

What I want to do is add a class to the accordion-toggle and then scroll/jump to that newly added class. Adding/removing the class works fine and I figured I would just add a scrollTop with in that same block...but no such luck. What am I missing?

Here is how it's set up:

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>

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');
    });
});

Upvotes: 2

Views: 6906

Answers (2)

rotamota
rotamota

Reputation: 77

$(".accordion-body").on("shown", function () {
var id = $(this).attr('id');
$('html, body').animate({scrollTop: $('#'+id).offset().top + -50}, 1000);
});
});

Upvotes: 1

Bass Jobsen
Bass Jobsen

Reputation: 49054

You refer to Bootstrap 3 while you are using Bootstrap 2 events, see: http://getbootstrap.com/javascript/#collapse. The collapse plugin adds a class (.in) already.

when shown.bs.collapse is trigger your "new" panel has the ".in" class and when hide.bs.collapse is trigger the "old" panel still has the ".in" class.

try:

$(function () {
    $('#accordion').on('shown.bs.collapse', function (e) {
        var offset = $('.panel.panel-default > .panel-collapse.in').offset();
            if(offset)$('html,body').scrollTop(offset.top);
    });
});

`

Upvotes: 4

Related Questions