Advertisement
briank

Kartra Tabbed Content

Dec 5th, 2019
385
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 3.48 KB | None | 0 0
  1. <!-- This goes in EMBED TRACKING CODE INTO THE <BODY> -->
  2. <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" />
  3.  
  4. <!-- This goes in EMBED TRACKING CODE INTO THE <FOOTER> -->
  5. <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
  6. <script>jQuery(function () { jQuery('#tabs-1').tabs(); });</script>
  7. <!-- If you have multiple tab groups on a page, you can use '#tabs-1,#tabs-2,#tabs-3' etc. as needed. -->
  8.  
  9. <!-- This will be a column component (col-md-12 = 100%) within the <div class="row"> for one of your page sections -->
  10. <div class="col-md-12 colView" data-builder="edit del dnd" draggable="true">
  11. <!-- Add id="tabs-1" to define tab group 1 -->
  12. <div id="tabs-1" class="js_kartra_component_holder"><div><div>
  13. <!-- This block becomes the tabs/tab labels -->
  14. <div data-embed="true"><ul><li><a href="#tabs-1-1">Tab 1</a></li><li><a href="#tabs-1-2">Tab 2</a></li><li><a href="#tabs-1-3">Tab 3</a></li></ul></div></div></div>
  15. <!-- Add id="tabs-1-1" for tab 1 in group 1 -->
  16. <div id="tabs-1-1" data-component="text" draggable="true"><div class="kartra_text" data-builder="content del clone dnd" data-selector="*[data-builder*=&quot;content&quot;]" style="position: relative;"><p>THIS IS TAB #1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ac tristique odio. Vestibulum id fermentum tortor, vitae vulputate erat. Sed in mattis velit. Praesent sodales sapien in iaculis malesuada. Sed pellentesque lacus justo, at suscipit urna ornare a. Pellentesque id consectetur odio. Aenean feugiat urna congue lectus hendrerit finibus. Nunc porttitor libero eros, et luctus sem suscipit in. Integer elementum lacus sed vehicula sagittis. Fusce ultrices quam vel commodo pretium. Sed cursus turpis id pellentesque feugiat. Suspendisse potenti.</p>
  17. </div></div>
  18. <!-- Add id="tabs-1-2" for tab 2 in group 1 -->
  19. <div id="tabs-1-2" data-component="text" draggable="true"><div class="kartra_text" data-builder="content del clone dnd" data-selector="*[data-builder*=&quot;content&quot;]" style="position: relative;"><p>THIS IS TAB #2 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ac tristique odio. Vestibulum id fermentum tortor, vitae vulputate erat. Sed in mattis velit. Praesent sodales sapien in iaculis malesuada. Sed pellentesque lacus justo, at suscipit urna ornare a. Pellentesque id consectetur odio. Aenean feugiat urna congue lectus hendrerit finibus. Nunc porttitor libero eros, et luctus sem suscipit in. Integer elementum lacus sed vehicula sagittis. Fusce ultrices quam vel commodo pretium. Sed cursus turpis id pellentesque feugiat. Suspendisse potenti.</p>
  20. </div></div>
  21. <!-- Add id="tabs-1-3" for tab 3 in group 1 -->
  22. <div id="tabs-1-3" data-component="text" draggable="true"><div class="kartra_text" data-builder="content del clone dnd" data-selector="*[data-builder*=&quot;content&quot;]" style="position: relative;"><p>THIS IS TAB #3&nbsp;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ac tristique odio. Vestibulum id fermentum tortor, vitae vulputate erat. Sed in mattis velit. Praesent sodales sapien in iaculis malesuada. Sed pellentesque lacus justo, at suscipit urna ornare a. Pellentesque id consectetur odio. Aenean feugiat urna congue lectus hendrerit finibus. Nunc porttitor libero eros, et luctus sem suscipit in. Integer elementum lacus sed vehicula sagittis. Fusce ultrices quam vel commodo pretium. Sed cursus turpis id pellentesque feugiat. Suspendisse potenti.</p>
  23. </div></div></div></div>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement