Menu
I want to make a table looks like this:
The inside table is not an issue but don't know how to create the outer frame which includes "Item Descriptions", "Shipping", and "Returns" tabs. A minimal example would be greatly appreciated. Thank you.
694
Approach: In the body tag create some tabs under the div tag with a Custom-Data-Attribute that holds the id of the content. Create another div tag to store the content of the tab with a specific id. Specify data attributes for each content tag to display only one tab content at a time.
To make the tabs toggleable, add the data-toggle="tab" attribute to each link. Then add a . tab-pane class with a unique ID for every tab and wrap them inside a div element with class .
To create nested tabs, you can create a new tab group, then click the button "Add HTML Code" and add the shortcode of another tab group.
You could certainly use jQuery to solve this. That's what I did when I needed some tabs. I did something like:
<ul>
<li><a href="#tab-description">Description</a></li>
<li><a href="#tab-shipping">Shipping</a></li>
<li><a href="#tab-returns">Returns</a></li>
</ul>
<div id="tab-description" class="mytabs">
</div>
<div id="tab-shipping" class="mytabs">
</div>
<div id="tab-returns" class="mytabs">
</div>
and then some jQuery to make the tabs:
<script language="javascript" type="text/javascript">
$(document).ready(function () {
$("#mytabs").tabs({ fx: {opacity: 'toggle'} });
});
</script>
works pretty nicely for me. Just fill in whatever your content is in each of the divs.
58
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
