Example Product Post with Tab Panel Show & Hide Functions

This is an example of product post using a tab panel powered by Bootstrap 3.0++ responsive framework. By default, the auto template for BlogrCart Closet PRO version comes wiith an advance Auto Post Template whcih incorporates these functions. Each panel comes with a dedicated tab link & associated with a tab panel with a unique tag. Unfortunately for Freemium theme users, this function is not included & replaced with a static product details section to insert product image thumbnails & informations. Edit the link text to the associated tab panel body to add valuable information for your particular product or even some store important information.

$ 45.00

- Select Colour - Blue White Black

- Select Size - Size S Size M Size L

Add to Cart

New

• More Images
• Tab Nav 1
• Tab Nav 2
• Tab Nav 3

This is tab-section-1 and uses the data-target="#tab-section-1" link labelled Tab Nav 2 to open/expand/view. Edit the text within this box/table in Blogger editor easily & this panel automatically displays as a hidden tabbed & open/displays once the link is clicked. At any nav link & tab panel, add a class active to allow to display by default. A class active is required to allow a tab panel to display & hide the others. This section is very useful in providing informational details for a particular product. Use this as your standard/repeated product size & dimensions section. Adding a table within this section is not schematic & will break the product display.

This is tab-section-2 and uses the data-target="#tab-section-2" link labelled Tab Nav 2 to open/expand/view. Edit the text within this box/table in Blogger editor easily & this panel automatically displays as a hidden tabbed & open/displays once the link is clicked. This section is very useful in providing special features for a particular product & adding more information to users . Use this as your standard/repeated information section. Adding a table within this section is not schematic & will break the product display.

This is tab-section-3 and uses the data-target="#tab-section-3" link labelled Tab Nav 3 to open/expand/view. Edit the text within this box/table in Blogger editor easily & this panel automatically displays as a hidden tabbed & open/displays once the link is clicked. This section is very useful in providing special features for a particular product & adding more information to users . Use this as your repeated information section. Adding a table within this section is not schematic & will break the product display.