-
Closed
-
I’m having an issue with the tabs short code. All of the generated IDs are the same. As a result the tabs don’t change. I’m using alora 2.7.7.
The code I’m using is
[t4p_tabs layout="horizontal" justified="yes" backgroundcolor="" inactivecolor="" class="" id=""]
[t4p_tab title="test1"]test1 Tab Content[/t4p_tab]
[t4p_tab title="test2"]test2 Tab Content[/t4p_tab]
[/t4p_tabs]The output HTML is:
<div class="t4p-tabs t4p-tabs-1 horizontal-tabs">
<style>.t4p-tabs.t4p-tabs-1 .nav-tabs li a{border-top-color:#ebeaea;background-color:#ebeaea;}.t4p-tabs.t4p-tabs-1 .nav-tabs li.active a,.t4p-tabs.t4p-tabs-1 .nav-tabs li.active a:hover,.t4p-tabs.t4p-tabs-1 .nav-tabs li.active a:focus{background-color:#37B6BD;border-right-color:#37B6BD;}.t4p-tabs.t4p-tabs-1 .nav,.t4p-tabs.t4p-tabs-1 .nav-tabs,.t4p-tabs.t4p-tabs-1 .tab-content .tab-pane{border-color:#ebeaea;}</style>
<div class="nav">
<ul class="nav-tabs nav-justified">
<li class="active">
<a class="tab-link" href="#tab-569aef38915b3" data-toggle="tab">test1</a>
</li>
<li class="">
<a class="tab-link" href="#tab-569aef38915b3" data-toggle="tab">test2</a>
</li>
</ul>
</div>
<div class="tab-content">
<div class="tab-pane fade active in" id="tab-569aef38915b3">test1 Tab Content</div>
<div class="tab-pane fade" id="tab-569aef38915b3">test2 Tab Content</div>
</div>
</div>
Hi,
Please use this as an example.
Thank you
That has the same issue.
code:
output:
<div class="t4p-tabs t4p-tabs-1 horizontal-tabs">
<div class="nav">
<ul class="nav-tabs nav-justified">
<li class="">
<a class="tab-link" href="#tab-569c718d3f235" data-toggle="tab">Tab 1</a>
</li>
<li class="active">
<a class="tab-link" href="#tab-569c718d3f235" data-toggle="tab">Tab 2</a>
</li>
<li>
<a class="tab-link" href="#tab-569c718d3f235" data-toggle="tab">Tab 3</a>
</li>
</ul>
</div>
<div class="tab-content">
<div class="tab-pane fade active in" id="tab-569c718d3f235">Tab 1 Content</div>
<div class="tab-pane fade" id="tab-569c718d3f235">Tab 2 Content</div>
<div class="tab-pane fade" id="tab-569c718d3f235">Tab 3 Content</div>
</div>
</div>
Hi,
Please check for plugin conflict by removing one plugin at a time.
Your tab html should be as follows. the tab id is random.
<div class="t4p-tabs t4p-tabs-1 horizontal-tabs"><style>.t4p-tabs.t4p-tabs-1 .nav-tabs li a{border-top-color:#ebeaea;background-color:#ebeaea;}.t4p-tabs.t4p-tabs-1 .nav-tabs li.active a,.t4p-tabs.t4p-tabs-1 .nav-tabs li.active a:hover,.t4p-tabs.t4p-tabs-1 .nav-tabs li.active a:focus{background-color:#5bc0de;border-right-color:#5bc0de;}.t4p-tabs.t4p-tabs-1 .nav,.t4p-tabs.t4p-tabs-1 .nav-tabs,.t4p-tabs.t4p-tabs-1 .tab-content .tab-pane{border-color:#ebeaea;}</style><div class="nav"><ul class="nav-tabs nav-justified"><li class="active"><a data-toggle="tab" href="#tab-569cb3df33f92" class="tab-link">Tab 1</a></li><li><a data-toggle="tab" href="#tab-569cb3df33ffa" class="tab-link">Tab 2</a></li><li><a data-toggle="tab" href="#tab-569cb3df34053" class="tab-link">Tab 3</a></li></ul></div><div class="tab-content"><div id="tab-569cb3df33f92" class="tab-pane fade in active">Tab 1 Duis vitae lectus dui. Vestibulum lobortis aliquam nisl. Vivamus feugiat, sem vel tincidunt suscipit, tellus lectus lacinia enim, quis pellentesque risus augue in felis. Praesent posuere ut libero sed pulvinar. Phasellus eget magna elit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla suscipit dui vel metus lobortis tristique. Morbi tristique sem velit, ac aliquam purus consectetur quis.</div>
<div id="tab-569cb3df33ffa" class="tab-pane fade">Tab 2 Duis vitae lectus dui. Vestibulum lobortis aliquam nisl. Vivamus feugiat, sem vel tincidunt suscipit, tellus lectus lacinia enim, quis pellentesque risus augue in felis. Praesent posuere ut libero sed pulvinar. Phasellus eget magna elit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla suscipit dui vel metus lobortis tristique. Morbi tristique sem velit, ac aliquam purus consectetur quis.</div>
<div id="tab-569cb3df34053" class="tab-pane fade">Tab 3 Duis vitae lectus dui. Vestibulum lobortis aliquam nisl. Vivamus feugiat, sem vel tincidunt suscipit, tellus lectus lacinia enim, quis pellentesque risus augue in felis. Praesent posuere ut libero sed pulvinar. Phasellus eget magna elit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla suscipit dui vel metus lobortis tristique. Morbi tristique sem velit, ac aliquam purus consectetur quis.</div></div></div>
Thank you.
The topic Tab shortcode not working is closed to new replies