选项卡中选项卡中的嵌套选项卡 Bootstrap

Question

I have used the nested tab from Bootstrap 2.3.2 from this SO question .

But I want to use the newest Bootstrap Framework 3.3.6 or even 4.x Alpha, but I didn't changed any class names only the source of the CSS-,JS and the newer JQuery file.

My nested tabs should have not two tab orders but four. You can see my current status at https://jsfiddle.net/ks93zdxk/3/

Questions:

1. I don't know, if I could/should change something from the Bootstrap 2.3.2 to Bootstrap 3.3.6 in this code.

2. If you click in "Passiv" in all combinations the the third order tabs should have the same position as the tabs from "Aktiv", which have the same names, but different IDs. I have the same problem with clicking on "transitiv (Hilfsverb avoir)". Here the second order tabs should have also the same position like on "intransitiv (Hilfsverb être)", which have also the same names, but different IDs. I think some </div> -tags had to be in other lines, but I don't know where exactly they should be.

Answer 1

Principally, you did it right, but you've made some mistakes in the nesting of the HTML tags: the <div class="tab-content"> needs to be wrapped around any group of <div class="tab-pane"> .

<div class="tab-content">
  <div class="tab-pane fade active in" id="etre-voice-gender1111">
    <p>Tab 1.1.1.1 être Aussage aktiv männlich</p>
  </div>
  <div class="tab-pane fade" id="etre-voice-gender1112">
    <p>Tab 1.1.1.2 être Aussage aktiv weiblich</p>
  </div>
</div>

Example corrected .

You should consult the official documentation .

Des salutations aus der Schweiz.