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

Popular posts from this blog

java - Run a .jar on Heroku -

java - Jtable duplicate Rows -

validation - How to pass paramaters like unix into windows batch file -