javascript - Trigger nested tab pane on Bootstrap 3 -
i'm developing site using latest bootstrap release, , need figure out how solve this:
i've nested 2 tab panes, able manage lot of information in little space (it´s long law , need show articles clearly)
the first tabs divides main sections, nested shows in little pieces articles.
it works fine in main container.
but i´ll need navigation tree in sidebar, , can´t trigger nested pane tab if parent 1 isn´t enabled.
i think posible add jquery trigger parent tab when clicking direct link nested one, don´t it... :(
this code (my apoligies, see long):
<!-- sidebar --> <div class="bs-sidebar" role="complementary"> <ul id="test"> <li><a href="#test_1" data-toggle="tab">title i</a> <ul> <li><a href="#test_11" data-toggle="tab">sub_title i</a></li> <li><a href="#test_12" data-toggle="tab">sub_title ii</a></li> </ul> </li> <li><a href="#test_2" data-toggle="tab">title ii</a></li> <!-- ... --> </ul> </div> <!-- main container --> <div role="main"> <h2>some title</h2> <div class="bs-example bs-example-tabs"> <div class="panel panel-default"> <div class="collapse navbar-collapse navbar-ex1-collapse"> <ul id="tabs" class="nav nav-tabs"> <li><a href="#test_1" data-toggle="tab">title i</a></li> <li><a href="#test_2" data-toggle="tab">title ii</a></li> <!-- ... --> </ul> </div> <div class="panel-body parent"> <div id="tabs_parent" class="tab-content"> <div id="test_0" class="tab-pane active fade in"> <p>instructions</p> </div> <div id="test_1" class="tab-pane fade"> <ul> <li><a href="#test_11" data-toggle="tab">sub_title i</a></li> <li><a href="#test_12" data-toggle="tab">sub_title ii</a></li> </ul> <div id="tabs_children" class="tab-content"> <div id="test_11" class="tab-pane fade"> <p>sub-i lorem ipsum dolor sit amet...</p> </div> <div id="test_12" class="tab-pane fade"> <p>subii - morbi lectus nibh...</p> </div> </div> </div> <div id="test_2" class="tab-pane fade"> <p>morbi lectus nibh...</p> </div> <!-- ... -->
i have tested yet! add jquery code make trigger
first,
add id elements:
<li><a href="#test_11" id="id_test_11" data-toggle="tab">sub_title i</a></li> <li><a href="#test_12" id="id_test_12" data-toggle="tab">sub_title ii</a></li>
and
<li><a href="#test_1" id="id_test_1" data-toggle="tab">title i</a></li> <li><a href="#test_2" id="id_test_2" data-toggle="tab">title ii</a></li>
after, add javascript code:
$('#id_test_11').on('click',function(e){ $('#id_test_1').click() });
Comments
Post a Comment