javascript - Bootstrap 4 nested tabs not removing active -

i have nested tabs, vertical , horizontal don't switch active states or gets buggy

body  {    min-height: 100%;  }

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css">    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-kj3o2dktikvyik3uenzmm7kckrr/re9/qpg6aazgjwfdmvna/gpgff93hxpg5kkn" crossorigin="anonymous"></script>  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/u6ypibehpof/4+1nzfpr53nxss+glckfwbdfntxtclqqenisfwazpkamnfnmj4" crossorigin="anonymous"></script>  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0abixch4zdo7tp9hkz4tshbi047nrkglo3sejag45jxxngifyzk4si90rdiqnm1" crossorigin="anonymous"></script>    <div class="container-fluid row c2" id="my_jiku_box">  <div class="col-12 row" id="args">    <div class="col-4 nav flex-column nav-pills c1" id="vertmenu" role="tablist">      <a class="nav-link active" href="#v-pills-0" data-toggle="pill" role="tab"      aria-controls="#v-pills-0" aria-expanded="true">1980 markina attack<span class=      "spacetimeinfo">spain, 20 september 1980</span></a><a class="nav-link" href=      "#v-pills-1" data-toggle="pill" role="tab" aria-controls="#v-pills-1"      aria-expanded="false">cafeter&iacute;a rolando bombing<span class=      "spacetimeinfo">spain, 13 september 1974</span></a>    </div>      <div class="col-8" id="hormenu">      <div class="tab-content" id="v-pills-tabcontent">        <div class="tab-pane fade active show" aria-labelledby="v-pills-0" id=        "v-pills-0">          <ul class="nav nav-pills nav-justified" role="tablist" id="pills-tab0">            <li class="nav-item"><a class="nav-link active" href="#pills-0"            data-toggle="pill" role="tab" aria-controls="pills-0" aria-expanded=            "true">text</a></li>              <li class="nav-item"><a class="nav-link" href="#pills-images0" data-toggle=            "pill" role="tab" aria-controls="pills-0" aria-expanded=            "true">images</a></li>              <li class="nav-item"><a class="nav-link" href="#pills-videos0" data-toggle=            "pill" role="tab" aria-controls="pills-0">videos</a></li>          </ul>            <div class="tab-content">            <div class="tab-pane fade active show" id="pills-0">              <div class="toolbar">                <a data-command="bold" href="#"></a><a data-command="italic" href=                "#"></a><a data-command="underline" href="#"></a><a data-command=                "strikethrough" href="#"></a>              </div>                <div class="dropel col">                <div class="drag-header">                  drag , resize me!                </div>                  <p class="content_jiku" contenteditable="true">the 1980 markina attack                gun attack basque separatist organisation eta                occurred on 20 september 1980 near basque town of markina (spanish:                ). targets group of off-duty civil guards having                lunch in bar in town. 4 civil guards killed. attack                1 of deadliest of 1980, year when eta killed more people                other.</p>              </div>            </div>              <div class="tab-pane fade dropel col" id="pills-images0">            <div class="drag-header"></div><img class="img-fluid" src=            "https://lh6.googleusercontent.com/proxy/z9r-exztzribnztvezvak9u4glkmjxavscbkynjnzqb25odk2af0pbc3k1bppdkbaboaxumtb6l8_a1btxp_0v_zqwmv2z4_mbjh0_67azunvp02jeqthcfnvfoj8k_hn4oykadxpjgwjgfe8jy=-rj-w300-h300-l95-c0x039be5" /></div>              <div class="tab-pane fade dropel col" id="pills-videos0">              <div class="drag-header"></div>                <div class="embed-responsive embed-responsive-16by9">                <iframe class="embed-responsive-item" src=                "https://www.youtube.com/embed/vqmswhfnwzi?rel=0&amp;modestbranding=1"></iframe>              </div>            </div>          </div>        </div>          <div class="tab-pane fade" aria-labelledby="v-pills-1" id="v-pills-1">          <ul class="nav nav-pills nav-justified" role="tablist" id="pills-tab1">            <li class="nav-item"><a class="nav-link" href="#pills-1" data-toggle="pill"            role="tab" aria-controls="pills-1" aria-expanded="false">text</a></li>              <li class="nav-item"><a class="nav-link" href="#pills-images1" data-toggle=            "pill" role="tab" aria-controls="pills-1" aria-expanded=            "false">images</a></li>              <li class="nav-item"><a class="nav-link" href="#pills-videos1" data-toggle=            "pill" role="tab" aria-controls="pills-1">videos</a></li>          </ul>            <div class="tab-content">            <div class="tab-pane fade" id="pills-1">              <div class="toolbar">                <a data-command="bold" href="#"></a><a data-command="italic" href=                "#"></a><a data-command="underline" href="#"></a><a data-command=                "strikethrough" href="#"></a>              </div>                <div class="dropel col">                <div class="drag-header">                  drag , resize me!                </div>                  <p class="content_jiku" contenteditable="true">the cafeter&iacute;a                rolando bombing attack on 13 september 1974 @ rolando cafe                in calle del correo, madrid, spain killed 13 people , wounded                71. though no claim of responsibility made, attack                believed have been carried out armed basque separatist group                eta.</p>              </div>            </div>              <div class="tab-pane fade dropel col" id="pills-images1">            <div class="drag-header"></div><img class="img-fluid" src=            "https://i2.wp.com/upload.wikimedia.org/wikipedia/commons/thumb/6/67/real_casa_de_correos_%28madrid%29_05b.jpg/1280px-real_casa_de_correos_%28madrid%29_05b.jpg" /></div>              <div class="tab-pane fade dropel col" id="pills-videos1">              <div class="drag-header"></div>                <div class="embed-responsive embed-responsive-16by9">                <iframe class="embed-responsive-item" src=                "https://www.youtube.com/embed/vvocg3kinuk?rel=0&amp;modestbranding=1"></iframe>              </div>            </div>          </div>        </div>      </div>    </div>  </div>    <div class="col-6 row col"></div>

jsfiddle here, trying mix bootstrap vertical tab menu switches horizontal tab system

add dummy class maintab tabs on left side identify vertical tabs horizontal tabs. add code click function after declaration of panel variable. have pasted code working me inside external html file, , fiddle if make viewport size bigger. thing there console errors un-related issue. "failed construct 'presentationrequest': document sandboxed , lacks 'allow-presentation' flag".

another thing may have set default horizontal tag active on load.

your nested tabs not removing active color because of nav-pills class on outer div.

 <div class="container-fluid row c2" id="my_jiku_box">     <div class="col-6 row" id="args">       <div class="col-4 nav flex-column nav-pills c1" id="vertmenu" role="tablist">         <a class="nav-link active maintab" href="#v-pills-0" data-toggle="pill" role="tab"         aria-controls="#v-pills-0" aria-expanded="true">1980 markina attack<span class=         "spacetimeinfo">spain, 20 september 1980</span></a><a class="nav-link maintab" href=         "#v-pills-1" data-toggle="pill" role="tab" aria-controls="#v-pills-1"         aria-expanded="false">cafeter&iacute;a rolando bombing<span class=         "spacetimeinfo">spain, 13 september 1974</span></a>       </div>        <div class="col-8" id="hormenu">         <div class="tab-content" id="v-pills-tabcontent">           <div class="tab-pane fade active show hmain" aria-labelledby="v-pills-0" id=           "v-pills-0">             <ul class="nav nav-justified" role="tablist" id="pills-tab0">               <li class="nav-item"><a class="nav-link active" href="#pills-0"               data-toggle="pill" role="tab" aria-controls="pills-0" aria-expanded=               "true">text</a></li>                <li class="nav-item"><a class="nav-link" href="#pills-images0" data-toggle=               "pill" role="tab" aria-controls="pills-0" aria-expanded=               "true">images</a></li>                <li class="nav-item"><a class="nav-link" href="#pills-videos0" data-toggle=               "pill" role="tab" aria-controls="pills-0">videos</a></li>             </ul>              <div class="tab-content">               <div class="tab-pane fade active show" id="pills-0">                 <div class="toolbar">                   <a data-command="bold" href="#"></a><a data-command="italic" href=                   "#"></a><a data-command="underline" href="#"></a><a data-command=                   "strikethrough" href="#"></a>                 </div>                  <div class="dropel col">                   <div class="drag-header">                     drag , resize me!                   </div>                    <p class="content_jiku" contenteditable="true">the 1980 markina attack                   gun attack basque separatist organisation eta                   occurred on 20 september 1980 near basque town of markina (spanish:                   ). targets group of off-duty civil guards having                   lunch in bar in town. 4 civil guards killed. attack                   1 of deadliest of 1980, year when eta killed more people                   other.</p>                 </div>               </div>                <div class="tab-pane fade dropel col" id="pills-images0">               <div class="drag-header"></div><img class="img-fluid" src=               "https://lh6.googleusercontent.com/proxy/z9r-exztzribnztvezvak9u4glkmjxavscbkynjnzqb25odk2af0pbc3k1bppdkbaboaxumtb6l8_a1btxp_0v_zqwmv2z4_mbjh0_67azunvp02jeqthcfnvfoj8k_hn4oykadxpjgwjgfe8jy=-rj-w300-h300-l95-c0x039be5" /></div>                <div class="tab-pane fade dropel col" id="pills-videos0">                 <div class="drag-header"></div>                  <div class="embed-responsive embed-responsive-16by9">                   <iframe class="embed-responsive-item" src=                   "https://www.youtube.com/embed/vqmswhfnwzi?rel=0&amp;modestbranding=1"></iframe>                 </div>               </div>             </div>           </div>            <div class="tab-pane fade hmain" aria-labelledby="v-pills-1" id="v-pills-1">             <ul class="nav nav-justified" role="tablist" id="pills-tab1">               <li class="nav-item"><a class="nav-link" href="#pills-1" data-toggle="pill"               role="tab" aria-controls="pills-1" aria-expanded="false">text</a></li>                <li class="nav-item"><a class="nav-link" href="#pills-images1" data-toggle=               "pill" role="tab" aria-controls="pills-1" aria-expanded=               "false">images</a></li>                <li class="nav-item"><a class="nav-link" href="#pills-videos1" data-toggle=               "pill" role="tab" aria-controls="pills-1">videos</a></li>             </ul>              <div class="tab-content">               <div class="tab-pane fade" id="pills-1">                 <div class="toolbar">                   <a data-command="bold" href="#"></a><a data-command="italic" href=                   "#"></a><a data-command="underline" href="#"></a><a data-command=                   "strikethrough" href="#"></a>                 </div>                  <div class="dropel col">                   <div class="drag-header">                     drag , resize me!                   </div>                    <p class="content_jiku" contenteditable="true">the cafeter&iacute;a                   rolando bombing attack on 13 september 1974 @ rolando cafe                   in calle del correo, madrid, spain killed 13 people , wounded                   71. though no claim of responsibility made, attack                   believed have been carried out armed basque separatist group                   eta.</p>                 </div>               </div>                <div class="tab-pane fade dropel col" id="pills-images1">               <div class="drag-header"></div><img class="img-fluid" src=               "https://i2.wp.com/upload.wikimedia.org/wikipedia/commons/thumb/6/67/real_casa_de_correos_%28madrid%29_05b.jpg/1280px-real_casa_de_correos_%28madrid%29_05b.jpg" /></div>                <div class="tab-pane fade dropel col" id="pills-videos1">                 <div class="drag-header"></div>                  <div class="embed-responsive embed-responsive-16by9">                   <iframe class="embed-responsive-item" src=                   "https://www.youtube.com/embed/vvocg3kinuk?rel=0&amp;modestbranding=1"></iframe>                 </div>               </div>             </div>           </div>         </div>       </div>     </div>         <div class="col-6 row col"></div>    <script type="text/javascript">    $(document).ready(function(){   $(".nav-link").removeclass("active");   var elem = $(".maintab")[0];    $(elem).addclass("active");   var href=$(elem).attr("href")   console.log(href);   $("div"+href).show();   console.log($("div"+href).find(".nav-link")[0]);   $($("div"+href).find(".nav-link")[0]).addclass("nav-pills"); });            $(".nav-link").click(function(){           var me = $(this);           var panel = $('#' + this.hash.substr(1).tolowercase());            if(me.hasclass("maintab"))           {             $(".nav-link.active").removeclass("active");              var href=me.attr("href");             $("div.hmain").hide();                $("div.hmain").removeclass("active");             $("div"+href).show();           }           me.parent().addclass('nav-pills');           if(me.hasclass('active')){              $(".nav-link.active").removeclass("active");              me.removeclass('active');               panel.removeclass('active');                      return false;           }         });    </script>