# Tabs

To use the tabs functionality the fusionCSS.js library needs to be included.

## Vertical Tabs

- Tab 1
- Tab 2
- Tab 3

- Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

- ### For tab 2

  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

- Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

  - asaf saf sfa sfas f
  - asaf saf sfa sfas f
  - asaf saf sfa sfas f

  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

    <div id="tabs1" class="tabwidget vtabs" role="tabpanel" data-tabs-active="tabs-2">
    	<ul class="tabs" role="tablist">
    		<li role="tab" data-tabpanel="tabs-1">Tab 1</li>
    		<li role="tab" data-tabpanel="tabs-2">Tab 2</li>
    		<li role="tab" data-tabpanel="tabs-3">Tab 3</li>
    	</ul>
    	<ul class="tabpanels">
    		<li id="tabs-1" role="tabpanel">
    			<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
    		</li>
    		<li id="tabs-2" role="tabpanel">
    			<h3>For tab 2</h3>
    			<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
    		</li>
    		<li id="tabs-3" role="tabpanel">
    			<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
    			<ul>
    				<li>asaf saf sfa sfas f</li>
    				<li>asaf saf sfa sfas f</li>
    				<li>asaf saf sfa sfas f</li>
    			</ul>
    			<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
    		</li>
    	</ul>
    </div>

## Horizontal Tabs

- Tab 1
- Tab 2
- Tab 3

- Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

- ### For tab 2

  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

- Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

  - asaf saf sfa sfas f
  - asaf saf sfa sfas f
  - asaf saf sfa sfas f

  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

    <div id="tabs2" class="tabwidget" role="tabpanel">
    	<ul class="tabs" role="tablist">
    		<li role="tab" data-tabpanel="tabs2-1">Tab 1</li>
    		<li role="tab" data-tabpanel="tabs2-2">Tab 2</li>
    		<li role="tab" data-tabpanel="tabs2-3">Tab 3</li>
    	</ul>
    	<ul class="tabpanels">
    		<li id="tabs2-1" role="tabpanel">
    			<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
    		</li>
    		<li id="tabs2-2" role="tabpanel">
    			<h3>For tab 2</h3>
    			<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
    		</li>
    		<li id="tabs2-3" role="tabpanel">
    			<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
    			<ul>
    				<li>asaf saf sfa sfas f</li>
    				<li>asaf saf sfa sfas f</li>
    				<li>asaf saf sfa sfas f</li>
    			</ul>
    			<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
    		</li>
    	</ul>
    </div>

## Horizontal Tabs with Hide on Wrap

If the tabs do not fit within their container then the right most tabs are move to a drop down menu.

- Tab 1
- Tab 2
- Tab 3
- Tab 4
- Tab 5
- Tab 6
- Tab 7
- Tab 8
- Tab 9
- Tab 10
- Tab 11

- ### For tab 1

  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

- ### For tab 2

  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

- ### For tab 3

  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

  - asaf saf sfa sfas f
  - asaf saf sfa sfas f
  - asaf saf sfa sfas f

  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

- ### For tab 4

- ### For tab 5

- ### For tab 6

- ### For tab 7

- ### For tab 8

- ### For tab 9

- ### For tab 10

- ### For tab 11

    <div id="tabs2b" class="tabwidget" role="tabpanel" data-tabs-hide-wrap="1">
    	<ul class="tabs" role="tablist">
    		<li role="tab" data-tabpanel="tabs2b-1">Tab 1</li>
    		<li role="tab" data-tabpanel="tabs2b-2">Tab 2</li>
    		<li role="tab" data-tabpanel="tabs2b-3">Tab 3</li>
    		<li role="tab" data-tabpanel="tabs2b-4">Tab 4</li>
    		<li role="tab" data-tabpanel="tabs2b-5">Tab 5</li>
    		<li role="tab" data-tabpanel="tabs2b-6">Tab 6</li>
    		<li role="tab" data-tabpanel="tabs2b-7">Tab 7</li>
    		<li role="tab" data-tabpanel="tabs2b-8">Tab 8</li>
    		<li role="tab" data-tabpanel="tabs2b-9">Tab 9</li>
    		<li role="tab" data-tabpanel="tabs2b-10">Tab 10</li>
    		<li role="tab" data-tabpanel="tabs2b-11">Tab 11</li>
    	</ul>
    	<ul class="tabpanels">
    		<li id="tabs2b-1" role="tabpanel">
    			<h3>For tab 1</h3>
    			<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
    		</li>
    		<li id="tabs2b-2" role="tabpanel">
    			<h3>For tab 2</h3>
    			<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
    		</li>
    		<li id="tabs2b-3" role="tabpanel">
    			<h3>For tab 3</h3>
    			<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
    			<ul>
    				<li>asaf saf sfa sfas f</li>
    				<li>asaf saf sfa sfas f</li>
    				<li>asaf saf sfa sfas f</li>
    			</ul>
    			<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
    		</li>
    		<li id="tabs2b-4" role="tabpanel">
    			<h3>For tab 4</h3>
    		</li>
    		<li id="tabs2b-5" role="tabpanel">
    			<h3>For tab 5</h3>
    		</li>
    		<li id="tabs2b-6" role="tabpanel">
    			<h3>For tab 6</h3>
    		</li>
    		<li id="tabs2b-7" role="tabpanel">
    			<h3>For tab 7</h3>
    		</li>
    		<li id="tabs2b-8" role="tabpanel">
    			<h3>For tab 8</h3>
    		</li>
    		<li id="tabs2b-9" role="tabpanel">
    			<h3>For tab 9</h3>
    		</li>
    		<li id="tabs2b-10" role="tabpanel">
    			<h3>For tab 10</h3>
    		</li>
    		<li id="tabs2b-11" role="tabpanel">
    			<h3>For tab 11</h3>
    		</li>
    	</ul>
    </div>

### Nested Tabs

- Tab 1
- Tab 2

- Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

- - Tab A
  - Tab B

  - A - Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

  - B - Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

## Tabs In a Form

- Details
- General Restrictions
- Product Restrictions
- Shipping

- Coupon Code (Required)
  Description (Required)
    Coupon Active
  Type of Coupon
  Discount (Required)
    A percentage for Percentage Discounts or a monetary value for Fixed Amount Discounts and Gift Certificates.
- Minimum Order Cost
    Leave blank or set to 0 for no minimum order cost.
  Maximum Number of Uses
    Leave blank or set to 0 for unlimited uses.
  Maximum Uses Per Customer
    Leave blank or set to 0 for unlimited uses.
  Valid From Date (year-month-day hh:mm)
    Leave blank for no start date restriction.
  Expiration Date (year-month-day hh:mm)
    Leave blank if the coupon should never expire.
  Limit to Users with a Permission of
    1. [Logged in Users]
    A user only needs one of the above selected permissions to be able to use the coupon. If no permissions are selected then no permissions are required.
    Information
    These restrictions must be met by an order before the coupon will be considered valid for that order. If the coupon is not valid for an order then other restrictions will not be tried.
- Restrict to SKU Email Address must be a valid working email address.
    If given restrict coupon to SKU.
  Maximum Quantity to Discount
    The maximum quantity of items to discount if restricting by SKU.
  Discount Quantity Step
    The discount quantity stepping if restricting by SKU.
  Limit to Product Classes
    1. Accessories
    2. Standard
    If no product classes are selected then the coupon will apply to all product classes.
    Information
    If a specific SKU is given then the product class restrictions will be ignored.
    Warning
    These options only have an effect for percentage discount coupons.
- Free Shipping On
    1. Free
    2. Standard
    Information
    The shipping methods that will become free if the order meets the general restrictions for the coupon.

Top