I am looking to create tabs in my visualforce page using Bootstrap. These tabs will be rendered conditionally. The thing is, I am not getting Bootstrap tab switch/styling applied properly because of the <apex:outputPanel>
I am using between the <ul>
and <li>
tags, to render tabs conditionally.
Brief of what I am trying:
<ul class="nav nav-tabs" >
<apex:outputPanel rendered=#condition 1#>
<li class="active" style="display: inline;"><a data-toggle="tab" href="#MyTab1" class="active">My Tab 1</a>
</li>
</apex:outputPanel>
<apex:outputPanel rendered=#condition 2#>
<li style="display: none;"><a data-toggle="tab" href="#MyTab2" class="active">My Tab 2</a>
</li>
</apex:outputPanel>
</ul>
I even tried <apex:tabPanel>
and <apex:tab>
, but not getting the desired result. At least if I can apply styles in <apex:tabPanel>
with that of Bootstrap, it'll work.