Here's how:
Create a new Fragment Layout called 1 - FirstTabbed Fragment Text Left Of Image
Set its code to be:
Code: Select all
<div class="tabbertext" data-tabid="tabbedfrags">
{<actinic:variable name="FragmentTitle" />}
<actinic:block if="%3cactinic%3avariable%20name%3d%22FragmentAnchor%22%20%2f%3e%20!=%20%22%22" >
<a name="<actinic:variable name="FragmentAnchor" />"></a>
</actinic:block>
<actinic:block if="%3cactinic%3avariable%20name%3d%22FragmentImageFileName%22%20%2f%3e%20%21%3d%20%22%22">
<actinic:variable formatting="div,style|set-right" name="FragmentImage" />
</actinic:block>
<actinic:variable name="FragmentVideo" />
<actinic:variable formatting="div,style|fragment-text" name="FragmentText" />
</div>
Set its code to be:
Code: Select all
<div class="dp_extra_tab" data-tabid="tabbedfrags" data-tabname="<actinic:variable name="FragmentTitle" />">
<actinic:block if="%3cactinic%3avariable%20name%3d%22FragmentAnchor%22%20%2f%3e%20!=%20%22%22" >
<a name="<actinic:variable name="FragmentAnchor" />"></a>
</actinic:block>
<actinic:block if="%3cactinic%3avariable%20name%3d%22FragmentImageFileName%22%20%2f%3e%20%21%3d%20%22%22">
<actinic:variable formatting="div,style|set-right" name="FragmentImage" />
</actinic:block>
<actinic:variable name="FragmentVideo" />
<actinic:variable formatting="div,style|fragment-text" name="FragmentText" />
</div>
Look for the line:
Code: Select all
extratabs += '{' + $(this).attr('data-tabname') + '}' + '<div id="' + extratabid + '"></div>'; // tab with placemarker DIV
Code: Select all
if ( tabid == 'tabbedfrags' ) // remove any container around tabbed fragments
{
$(this).parent('div.product-details').remove();
}
To use this set the first Fragment that you want to appear in a tab to use layout 1 - FirstTabbed Fragment Text Left Of Image.
Set subsequent Fragments that you want to appear in tabs to use layout 2 - Subsequent Tabbed Fragment Text Left Of Image.