BW Toggle Boxes

BW Toggle Boxes allow you to toggle elements to show or hide. It is useful for navigations, the BW Selectbox and any occasion you want a user interaction to show and hide DOM elements.

Javascript usage

 

Lookout for warnings in your Javascript console if it fails to initialise. The most important thing to remember is that if you are not showing and hiding the same DOM element with each clickable trigger, the clickable trigger DOM element must have the attribute data-toggle_box with a jQuery selector string for the element you wish to show and hide with the trigger.

HTML data-toggle_box example

 

toggleBoxes

Below are variables for initialising toggleBoxes.

Variable/Key
Type
Default
Description
cls
string
false (bool)
the class name of all the elements you'd like to be clickable to show/hide other elements. If you are not going to set a single box to be shown/hidden by all triggers, you must have the attribute data-toggle_box on your element.
userops
object

toggleBoxes Options

Below are object variables references in the example as userops for initialising toggleBoxes.

Variable/Key
Type
Default
Description
box
string
false (bool)
this could also be a jQuery object of an element or a DOM element. It is only required if you have not added the data-toggle_box attribute to your trigger
show_single
boolean
true
set to false if multiple boxes can be open at once
init_function
function
false (bool)
function to be called when the boxes are initialised. Parameters passed back are the jQuery object of your trigger DOM element and "init"
show_function
function
false (bool)
function to be called when the boxes start showing. Parameters passed back are the jQuery object of your trigger DOM element and "show"
shown_function
function
false (bool)
function to be called when the boxes have finished their showing animation. Parameters passed back are the jQuery object of your trigger DOM element and "shown"
hide_function
function
false (bool)
function to be called when the boxes are starting to hide. Parameters passed back are the jQuery object of your trigger DOM element and "hide"
hidden_function
function
false (bool)
function to be called when the boxes have finished hiding. Parameters passed back are the jQuery object of your trigger DOM element and "hidden"
change_function
function
false (bool)
triggered at the same time as show_function and hide_function. Parameters passed back are the jQuery object of your trigger DOM element and "show" or "hide"
showing_class
string
tb-selected
the class to add to your triggers when it's box is showing. You can add this class to your trggers to make your box show when initialised

toggleBoxes userops.animation

Your userops.animation object variables. Customise how your box shows/hides.

Variable/Key
Type
Default
Description
disabled
boolean
false
set to true to disable animation
fade
boolean
true
set to false to disable fading
width
boolean
false
set to true to enable animation of the Toggle Box width from 0
height
boolean
false
set to true to enable animation of the Toggle Box height from 0
cross
boolean
false
set to true to enable showing and hiding of boxes to happen at the same time
top
integer
false (bool)
set to a number to move the box from the above (negative) or below (positive) it's final position as it is shows
left
integer
false (bool)
set to a number to move the box in from the left (negative) or right (positive) as it is shows
duration
integer
250
milliseconds to animate the box for

toggleBoxes userops.positioning

Your userops.positioning object variables. Set options for positioning.

Variable/Key
Type
Default
Description
follow_mouse
boolean
false
set to true to position the box relative to your cursor
relative
boolean
false
set to true to position the box relative to another element
relativeTo
element
false (bool)
if relative is true, the element to position the box relative to

toggleBoxes userops.triggers

Your userops.triggers object variables. It specifies options relating to your trigger elements.

Variable/Key
Type
Default
Description
click
boolean
true
set to false to disable toggling on click/tap
mouseOverOut
boolean
false
set to true to enable toggling on mouse hover
mouseOverTime
integer
200
milliseconds to wait on hover before showing the box
mouseOutTime
integer
200
milliseconds to wait after mouse is no longer hovering over the trigger before higin the box
hideDocClick
boolean
false
set to true to hide the box when any other part of the web page is clicked/tapped
stoppropagation
boolean
false
set to true to stop event propagation on toggling events for the triggers
preventdefault
boolean
true
set to false to enable default behaviour on toggling events for the triggers
retainOnBoxOver
boolean
true
set to false if you do not want the box to remain showing when the user has their cursor over the box.
noHide
boolean
false
set to true if you don't want the box to hide unless show_single is true and another trigger is called group the same group. Useful for page tabs.

toggleBoxes userops.overlay

Your userops.overlay object variables. It specified web page overlay options.

Variable/Key
Type
Default
Description
enabled
boolean
false
set to true to enable a page overlay when the box is being shown. We would usually recommend creating your page overlay and animating it yourself in your change_function
class
string
''
class name you want to add to the overlay element
opacity
float
0.6
opacity you want to the overlay to be when it is shown
animate
object
{
  disabled:false,
  duration:200
}
this object's variables are self explanatory and affect the animation of the page overlay