In bootstrap there are excellent nav-tabs and nav-pills that work through data-toggle = "tab"; a couple of sections are created:

<ul class="nav nav-pills"> <li class="active"> <a data-toggle="tab" href="mySection1">Первая</a> </li> <li> <a data-toggle="tab" href="mySection2">Вторая</a> </li> </ul> <section class="tab-content"> <section id="mySection1" class="tab-pane fade in active"> ... </section> <section id="mySection2" class="tab-pane fade"> ... </section> ... другие секции ... </section>

And everything is fine, even there is a fade class which is added to the tab-pane attribute so that switching between tabs is smooth, but when there are many tabs and their height varies greatly, especially exceeding the standard height of the viewport, the content jumps noticeably on switching because of the sharp change in the size of the content , so in bootstrap there is such a thing as accordion with a collapse class that makes smoothly folding panels between which you can switch, for example these are: http://www.tutorialrepublic.com/codelab.php?topic=bootstrap&file=accordion

Since I am not a master of layout and js but just learning, tell me, how can I add content folding, but in these nav-tabs / nav-pills?

Since I spent more than one day trying to find something like this in Gogol and Yanduks, all I found was https://css-tricks.com/organic-tabs/, they just do what they need, but I would like not to be fooled There are so many things, and try to implement this business with the maximum functionality of bootstrap and minimally jQuery.

I also tried to add the "collapse in" class to the active and "collapse" in the other tabs and change the data-toggle to collapse as in accordions, but the tabs stop responding to pressing.

Tell me good people how to win this question?

Thank you for attention.

    1 answer 1

    Objective : Build tabs tabs or pills with the effect of folding and folding like an accordion. At the same time, you can do it by using standard tools of the bootstrap, without adding your own scripts or adding other people's.

    Decided in three stages . The code at the end of the answer shows the results of all three stages.

    1) We will build tablets, because they are brighter :) We are starting to build not from tablets to accordion, but from accordion to tablets. We take from the description of the bootstrap an example with an accordion and rearrange the code fragments so that we get two of the three panels. In the top we collect all three headings, and in the bottom - the texts to them.

    2) We cross headers

     <div class="panel-heading" role="tab" id="headingTwo"> <h4 class="panel-title"> <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"> Collapsible Group Item #2 </a> </h4> </div>

    with pills from another bootstrap example

     <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>

    and get

     <li role="presentation" id="headingTwo"> <a class="collapsed" role="tab" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"> Collapsible Group Item #2 </a> </li>

    3) To make the active tablet stand out in blue, you need to attach class="active" and data-toggle="tab" . The first attribute refers to the item in the <li> list, and the second attribute refers to the link within this item. But the link already has data-toggle="collapse" . Therefore, we assign both remaining attributes to a list item.

    Result

     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> <style> h3 { margin-top: 0.2em; } .row { margin-top: 2em; } </style> <div class="container"> <div class="row"> <div class="col-xs-1"><h3>1)</h3></div> <div class="col-xs-11"> <div class="panel-group" id="accordion1" role="tablist" aria-multiselectable="true"> <div class="panel panel-default"> <div class="panel-heading" role="tab" id="headingOne1"> <h4 class="panel-title"> <a role="button" data-toggle="collapse" data-parent="#accordion1" href="#collapseOne1" aria-expanded="true" aria-controls="collapseOne1"> Item #1 </a> </h4> </div> <div class="panel-heading" role="tab" id="headingTwo1"> <h4 class="panel-title"> <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion1" href="#collapseTwo1" aria-expanded="false" aria-controls="collapseTwo1"> Item #2 </a> </h4> </div> <div class="panel-heading" role="tab" id="headingThree1"> <h4 class="panel-title"> <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion1" href="#collapseThree1" aria-expanded="false" aria-controls="collapseThree1"> Item #3 </a> </h4> </div> </div> <div class="panel panel-default"> <div id="collapseOne1" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne1"> <div class="panel-body"> <p>Anim pariatur cliche reprehenderit...</p> </div> </div> <div id="collapseTwo1" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo1"> <div class="panel-body"> <p>Anim pariatur cliche reprehenderit...</p> <p>Anim pariatur cliche reprehenderit...</p> </div> </div> <div id="collapseThree1" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree1"> <div class="panel-body"> <p>Anim pariatur cliche reprehenderit...</p> <p>Anim pariatur cliche reprehenderit...</p> <p>Anim pariatur cliche reprehenderit...</p> </div> </div> </div> </div> </div> </div><!--row--> <div class="row"> <div class="col-xs-1"><h3>2)</h3></div> <div class="col-xs-11"> <ul class="nav nav-pills" role="tablist"> <li role="presentation" id="headingOne2"> <a role="tab" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne2" aria-expanded="true" aria-controls="collapseOne2"> Item #1 </a> </li> <li role="presentation" id="headingTwo2"> <a class="collapsed" role="tab" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo2" aria-expanded="false" aria-controls="collapseTwo2"> Item #2 </a> </li> <li role="presentation" id="headingThree2"> <a class="collapsed" role="tab" data-toggle="collapse" data-parent="#accordion2" href="#collapseThree2" aria-expanded="false" aria-controls="collapseThree2"> Item #3 </a> </li> </ul> <div class="panel-group" id="accordion2" role="tablist" aria-multiselectable="true"> <div class="panel panel-default"> <div id="collapseOne2" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne2"> <div class="panel-body"> <p>Anim pariatur cliche reprehenderit...</p> </div> </div> <div id="collapseTwo2" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo2"> <div class="panel-body"> <p>Anim pariatur cliche reprehenderit...</p> <p>Anim pariatur cliche reprehenderit...</p> </div> </div> <div id="collapseThree2" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree2"> <div class="panel-body"> <p>Anim pariatur cliche reprehenderit...</p> <p>Anim pariatur cliche reprehenderit...</p> <p>Anim pariatur cliche reprehenderit...</p> </div> </div> </div> </div> </div> </div><!--row--> <div class="row"> <div class="col-xs-1"><h3>3)</h3></div> <div class="col-xs-11"> <ul class="nav nav-pills" role="tablist"> <li role="presentation" data-toggle="tab" class="active" id="headingOne3"> <a role="tab" data-toggle="collapse" data-parent="#accordion3" href="#collapseOne3" aria-expanded="true" aria-controls="collapseOne3"> Item #1 </a> </li> <li role="presentation" data-toggle="tab" id="headingTwo"> <a class="collapsed" role="tab" data-toggle="collapse" data-parent="#accordion3" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"> Item #2 </a> </li> <li role="presentation" data-toggle="tab" id="headingThree"> <a class="collapsed" role="tab" data-toggle="collapse" data-parent="#accordion3" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree"> Item #3 </a> </li> </ul> <div class="panel-group" id="accordion3" role="tablist" aria-multiselectable="true"> <div class="panel panel-default"> <div id="collapseOne3" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne3"> <div class="panel-body"> <p>Anim pariatur cliche reprehenderit...</p> </div> </div> <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo"> <div class="panel-body"> <p>Anim pariatur cliche reprehenderit...</p> <p>Anim pariatur cliche reprehenderit...</p> </div> </div> <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree"> <div class="panel-body"> <p>Anim pariatur cliche reprehenderit...</p> <p>Anim pariatur cliche reprehenderit...</p> <p>Anim pariatur cliche reprehenderit...</p> </div> </div> </div> </div> </div> </div><!--row--> </div><!--container--> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

    You can see live and in the sandbox .

    • In the morning I’ll give you a shine :))) you need to post a solution on jsfiddle.net a convenient sandbox. - Vitaly Protasov
    • one
      @VitalyProtasov Here we live . Here in the sandbox . - Gleb Kemarsky
    • Cool, still to make the crawling of content not from below but from under the tablets :)) invert movement. - Vitaly Protasov