CODEWITHSUNDEEP
javascripthtmltwitter-bootstrap
Abhilash Srivastava
Abhilash Srivastava

Reputation: 85

Bootstrap Tabpanel Next Previous Buttons

I have a Tab Panel and it has long content so it would be better for the user to have next and previous buttons.

but they aren't working.

This is aspx code :

<div class="col_4">
<div class="bs-example bs-example-tabs" role="tabpanel" data-example-id="togglable-tabs">
    <ul id="myTab" class="nav nav-tabs nav-tabs1" role="tablist">
        <li role="presentation" class="active"><a href="#aboutmyself" id="aboutmyself-tab" role="tab" data-toggle="tab" aria-controls="aboutmyself" aria-expanded="true">About Myself</a></li>
        <li role="presentation"><a href="#familydetails" role="tab" id="familydetails-tab" data-toggle="tab" aria-controls="familydetails">Family Details</a></li>
        <li role="presentation"><a href="#partnerpreference" role="tab" id="partnerpreference-tab" data-toggle="tab" aria-controls="partnerpreference">Partner Preference</a></li>
        <li role="presentation"><a href="#contact" role="tab" id="contact-tab" data-toggle="tab" aria-controls="contact">Contact</a></li>
    </ul>
    <div id="myTabContent" class="tab-content">
        <div role="tabpanel" class="tab-pane fade in active" id="aboutmyself" aria-labelledby="aboutmyself-tab">
            <!--Tab1 content-->
            <a class="btn-all btnNext" >Next</a>
        </div>
        <div role="tabpanel" class="tab-pane fade" id="familydetails" aria-labelledby="familydetails-tab">
            <!--Tab2 content-->
            <a class="btn-all  btnPrevious" >Previous</a>
            <a class="btn-all btnNext" >Next</a>
        </div>
        <div role="tabpanel" class="tab-pane fade" id="partnerpreference" aria-labelledby="partnerpreference-tab">
            <!--Tab3 content-->
            <a class="btn-all btnPrevious" >Previous</a>
            <a class="btn-all btnNext" >Next</a>
        </div>
        <div role="tabpanel" class="tab-pane fade" id="contact" aria-labelledby="contact-tab">
            <!--Tab4 content-->
            <a class="btn-all btnPrevious" >Previous</a>
         </div>

And here is the script.

<script type="text/javascript">
    $('.btnNext').click(function () {
        $('.nav-tabs > .active').next('li').find('a').trigger('click');
    });

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

Upvotes: 2

Views: 2425

Answers (1)

Zakaria Acharki
Zakaria Acharki

Reputation: 67505

Working fiddle

You code works fine you should just put it inside ready function :

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

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

Hope this helps.

Upvotes: 2

Related Questions