<div id="custom_tab" class="tabbable"> <ul class="nav nav-tabs"> <li class="active"><a href="#tab1" data-toggle="tab">Tab Button One</a></li> <li><a href="#tab2" data-toggle="tab">Tab Button Two</a></li> <li><a href="#tab3" data-toggle="tab">Tab Button Three</a></li> </ul> <div class="tab-content"> <div class="tab-pane active" id="tab1"> <p>My content for tab 1</p> </div> <div class="tab-pane" id="tab2"> <p>My content for tab 2</p> </div> <div class="tab-pane" id="tab3"> <p>My content for tab 3</p> </div> </div> </div>
<div id="custom_tab" class="tabbable"> <ul class="nav nav-tabs"> [[!getResources? &parents=`[[*id]]` &tpl=`tabButtons`]] </ul>
<div class="tab-content"> [[!getPages? &parents=`[[*id]]` &tpl=`tabContent`]] </div>
<li><a href="#tab[[+idx]]" data-toggle="tab">[[+pagetitle]]</a></li>
<div class="tab-pane active" id="tab[[+idx]]"> [[*content]] </div>
This question has been answered by jisaac. See the first response.
And how can I add the active class to the first tab automatically?Make sure idx starts at 0:
[[getResources?&idx=`0`]]
<div class="tab-pane active" id="tab[[+idx]]"> [[*content]] </div>
<div class="tab-pane[[+idx:is=`0`:then=`active`]]" id="tab[[+idx]]"> [[*content]] </div>
<div class="tab-pane [[+idx:is=`0`:then=`active`]]" id="tab[[+idx]]"> [[+content]] </div>
<li class="[[+idx:is=`0`:then=`active`]]"><a href="#tab[[+idx]]" data-toggle="tab">[[+pagetitle]]</a></li>
<div id="custom_tab" class="tabbable"> <ul class="nav nav-tabs"> [[getResources? &parents=`[[*id]]` &showHidden=`1` &tpl=`tabButtons` &idx=`0`]] </ul> <div class="tab-content"> [[getResources? &parents=`[[*id]]` &showHidden=`1` &tpl=`tabContent` &idx=`0` &includeContent=`1`]] </div><!-- end tab-content --> </div><!-- end tabbable -->