1.0.2 • Published 10 months ago
demofinal v1.0.2
`### Example Configuration
tabCustom({
selector: '.demo',
animation: 'fadeIn',
resize: true,
tabs: {
class: 'accComon',
allOpen: 'false',
toggleParentClass: 'commonParAcc',
toggleChildClass: 'commonChildAcc',
responsive: {
media: 376
}
},
slider: {
active: true,
nav: true,
touch: true,
responsive: {
0: {
items: 2
},
600: {
items: 2
},
800: {
items: 3
},
1000: {
active: false,
}
}
}
});
## `tabCustom` Configuration
The `tabCustom` function provides a customizable tab and accordion component with a range of configuration options. Below is a detailed explanation of each option you can use:
### Configuration Options
- **`selector`**: `string`
- Specifies the CSS selector for the element(s) to apply the `tabCustom` functionality.
- **`animation`**: `string`
- Defines the animation effect. Options include `'fadeIn'` (default) and `'slide'` (available in v2).
- **`resize`**: `boolean`
- If `true`, the component is responsive to window resize events. (Available in v2)
- **`tabs`**: `object`
- Configuration for accordion functionality.
- **`class`**: `string` - The class name for the tabs container.
- **`allOpen`**: `boolean` - If `'false'`, only one tabs section is open at a time.
- **`toggleParentClass`**: `string` - Class for the parent element that toggles the tabs.
- **`toggleChildClass`**: `string` - Class for the child elements affected by the toggle.
- **`responsive`**: `object` - Responsive behavior configuration.
- **`media`**: `number` - Maximum viewport width for tabs visibility. Set to `0` to disable.
- **`slider`**: `object`
- Configuration for slider functionality.
- **`active`**: `boolean` - Enables the slider if `true`.
- **`nav`**: `boolean` - Includes navigation controls if `true`.
- **`touch`**: `boolean` - Enables touch gestures if `true`.
- **`responsive`**: `object` - Responsive behavior configuration.
- **`0`**, **`600`**, **`800`**, **`1000`**: Configuration for different screen widths.
- **`items`**: `number` - Number of visible items.
- **`active`**: `boolean` - If `false`, disables the slider above specified widths.