IMO, find a different way. Nested tabs tend to be confusing to the user.

But is should work as long as you have different IDs for the elements needed.



Craig

>Hi everybody,
>
>I've checked this page http://tutsme-webdesign.info/bootstrap-3-toggable-tabs-and-pills/ but there is no nested tabs demo here and I am not sure it's possible (I'm trying, though).
>
>Just wondering if you already know how to make it happen (if it's possible).
>
>Here is my current markup:
>
>

><div class="col-lg-3 col-md-3 panel-container">
>                        <ul class="nav nav-pills nav-stacked">
>                            <li class="active"><a data-toggle="pill" href="#general" ng-class="{true: 'invalid-tab', false: ''}[form.editAccountGeneral.$invalid]">General</a></li>
>                            <li><a data-toggle="pill" href="#contact" ng-class="{true: 'invalid-tab', false: ''}[form.editContactForm.$invalid]">Contact</a></li>
>                            <li><a data-toggle="pill" href="#invoices" ng-class="{true: 'invalid-tab', false: ''}[form.editAccountInvoices.$invalid]">Invoices</a>
>                            <ul class="nav nav-pills nav-stacked">
>                                <li><a data-toggle="pill" href="#payInvoices" ng-class="{true: 'invalid-tab', false: ''}[form.payInvoices.$invalid]">Pay Invoices</a></li>
>                                <li><a data-toggle="pill" href="#applyFees" ng-class="{true: 'invalid-tab', false: ''}[form.applyFees.$invalid]">Apply Fees</a></li>
>                            </ul></li>
>                            <li><a data-toggle="pill" href="#userDefined" ng-class="{true: 'invalid-tab', false: ''}[form.editAccountUserDefinedForm.$invalid]">User Defined</a></li>
>                            <li><a data-toggle="pill" href="#security" ng-class="{true: 'invalid-tab', false: ''}[form.editAccountSecurityForm.$invalid]">Security Restrictions</a></li>
>                            </ul>
>                    </div>
>
>					<div class="col-lg-9 col-md-9 panel-container">
>                        <div class="tab-content">
>							<div class="tab-pane active" id="general">
>                                @Html.Partial("EditAccountGeneral")
>                            </div>
>                            <div class="tab-pane" id="contact">
>                                @Html.Partial("EditAccountContact")
>                            </div>
>
>                            <div class="tab-pane" id="invoices">
>                                @Html.Partial("EditAccountInvoices")
>                                <div class="tab-content">
>                                    <div class="tab-pane active" id="payInvoices">
>                                        @Html.Partial("PayInvoices")
>                                    </div>
>                                    <div class="tab-pane" id="applyFees">
>                                        @Html.Partial("ApplyFees")
>                                    </div>
>                                </div>
>                            </div>
>
>                            <div class="tab-pane" id="userDefined">
>                                @Html.Partial("EditAccountUserDefined")
>                            </div>
>                            <div class="tab-pane" id="security">
>                                @Html.Partial("EditAccountSecurity")
>                            </div>
>						</div>
>					</div>					

>
>I want to get the Pay Invoices and Apply Fees as two extra tabs under Invoices. Invoices should open its own content pane (it does Ok now) and if Click on Invoices tab, I should see 2 extra tabs beneath it with their individual panes.
>
>So, this is what I'm trying to implement and testing it now. I am wondering how to achieve the part of only showing 2 extra tabs after I clicked on Invoices tab.
>
>Thanks in advance.