Toglr

Many components. One function.

Many components share the common action of showing and hiding the infocus information. By creating a simple yet dynamic function, common and uncommon components can be built by using the same function and adjusting the CSS to get the desired functional outcome.

Download

How it works

Download the script and the base css file to start. Each components base css is named according to its matching component. You can use the styles as is or add your own modifications. Below is the function call that will allow you to apply settings for your components.

$( control ).toglr( group, closeAll, addBody, direction, full, actionType, push );

control

The basic structure of each item is identified with a specific class (.control) to trigger the matching items content to show.

group

The default state applies the group setting to the entire page but a group identifier can be applied by using the group setting to create multiples of the same component within a single page.

closeAll

This setting will set all items to closed except the active item. This can be set to true to always have a single item in the group open or set to false to allow multiple items to be set to active at the same time.

addBody

This setting adds an active class to the body in case the component being used needs to make adjustments to the body when active.

direction

This setting adds the direction provided to the body.

full

This setting adds a class name of 'full' to the body in the case that the component needs an aditional setting to fill the screen.

actionType

This setting is used to adjust the action used to trigger the function. It works using jQuery syntax.

push

This setting adds a class name of 'push' to the body in the case that the component needs an aditional setting to push the body when active.

Additional Controls

Expand, Collapse, Next and Previous are controls that can be used based on the type of component being created. The data-nav and data-control values need to match.

Navigation Container:

data-nav="[group-control-name]"

Group Container:

data-control="[group-control-name]"

Examples

Toglr

Many components. One function.

How it works

control

group

closeAll

addBody

direction

full

actionType

push

Additional Controls

Example Components

Accordions

Vertical

Horizontal

Code:

Tabs

Horizontal

Vertical

Code:

Trays

Code:

Slider

Code:

Code:

Tooltip

Code:

Code:

Popover

Code:

Edge Container

Code:

Examples

Toglr

Many components. One function.

How it works

control

group

closeAll

addBody

direction

full

actionType

push

Additional Controls

Example Components

Accordions

Vertical

Horizontal

Code:

Tabs

Horizontal

Vertical

Code:

Trays

Code:

Slider

Code:

Dropdown

Code:

Tooltip

Code:

Modal

Code:

Popover

Code:

Edge Container

Code: