Adrian Duquenoy Adrian Duquenoy - 5 months ago 69
jQuery Question

Bootstrap Tabs - Next and previous

I have an issue with my Bootstrap Tabs.

I defined a

scrollTop
function on next button. The scrolling is working fine but the tab is jumping from 1 to 3.

My JS code:

<script>

$('.btnNext').click(function(){

$('html, body').animate({
scrollTop: jQuery(".expect").offset().top
}, 800,

function () {
$('.nav-tabs > .active').next('li').find('a').trigger('click');
}
);

});

$('.btnPrevious').click(function(){
$('.nav-tabs > .active').prev('li').find('a').trigger('click');
});

</script>


HTML Code :

<div class="step-tabs">
<ul class="nav nav-tabs" role="tablist">
<li class="nav-item active" style="padding:3px;">
<a class="nav-link" data-toggle="tab" href="#tab1" role="tab">STAP 01</a>
</li>
<li class="nav-item" style="padding:3px;">
<a class="nav-link" data-toggle="tab" href="#tab2" role="tab">STAP 02</a>
</li>
<li class="nav-item" style="padding:3px;">
<a class="nav-link" data-toggle="tab" href="#tab3" role="tab">STAP 03</a>
</li>
<li class="nav-item" style="padding:3px;">
<a class="nav-link" data-toggle="tab" href="#tab5" role="tab">STAP 03</a>
</li>
<li class="nav-item" style="padding:3px;">
<a class="nav-link" data-toggle="tab" href="#tab5" role="tab">STAP 03</a>
</li>
<li class="nav-item" style="padding:3px;">
<a class="nav-link" data-toggle="tab" href="#tab6" role="tab">STAP 03</a>
</li>
</ul>
</div>
<div class="step-panes">
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane active" id="tab1" role="tabpanel">
<p>CONTENT TABS 01<br><br><br><br><br><br><br><br><br><br>XXXXXX<br><br><br><br><br><br><br>XXXXXXX<br><br><br><br><br><br><br></p><a class="btn btn-primary btnNext">Next</a>
</div>
<div class="tab-pane" id="tab2" role="tabpanel">
<p>CONTENT TABS 01<br><br><br><br><br><br><br><br><br><br>XXXXXX<br><br><br><br><br><br><br></p><a class="btn btn-primary btnNext">Next</a> <a class="btn btn-primary btnPrevious">Previous</a>
</div>
<div class="tab-pane" id="tab3" role="tabpanel">
<p>CONTENT TABS 03</p><a class="btn btn-primary btnNext">Next</a> <a class="btn btn-primary btnPrevious">Previous</a>
</div>
<div class="tab-pane" id="tab4" role="tabpanel">
<p>CONTENT TABS 03</p><a class="btn btn-primary btnNext">Next</a> <a class="btn btn-primary btnPrevious">Previous</a>
</div>
<div class="tab-pane" id="tab5" role="tabpanel">
<p>CONTENT TABS 03</p><a class="btn btn-primary btnNext">Next</a> <a class="btn btn-primary btnPrevious">Previous</a>
</div>
<div class="tab-pane" id="tab6" role="tabpanel">
<p>CONTENT TABS 03</p><a class="btn btn-primary btnNext">Next</a> <a class="btn btn-primary btnPrevious">Previous</a>
</div>
</div>
</div>

Answer

This particular code is causing the issue (taking Skelly's approach)

 $('html, body').animate({
        scrollTop: jQuery(".expect").offset().top
    }, 800,

I am unable find a reason why the above code causes the skip jump. But I do have solution which resolves this.

JS

$(document).ready(function() {
    $('.step-tabs').on('click', function() {
        $('html,body').animate({
            scrollTop: $(this).offset().top
        }, 800);
    });
});


$('.btnNext').click(function() {
    $('.nav-tabs > .active').next('li').find('a').trigger('click');
});


$('.btnPrevious').click(function() {
    $('.nav-tabs > .active').prev('li').find('a').trigger('click');
});

P.S - If anyone can explain the reason why his code wasn't working, I'll be able to die peacefully.

WORKING BOOTPLY