qToggle jQuery Plugin Examples

Download This Plugin Back To jQueryScript

A jQuery plugin that allows you to toggle the visibility of elements using fade or slide animations and manage CSS classes on those elements for styling purposes.

Targeting reset all

targeting a single element with simple selector

data-toggle-selector=".example1"
target with class 'example1'

targeting a single element using a complex selector

data-qtoggle-selector="#example2 > .target"
child of #example2 with class 'target'

targeting a multiple elements with a single class selector.

data-qtoggle-selector=".multitarget"
target with class 'multitarget'
target with class 'multitarget'
target with class 'multitarget'

targeting a single element with a ID selector.

data-qtoggle-selector="#myTargetID"
target with ID "myTargetID"

targeting with keyword prev

previous element
data-qtoggle-selector="prev"

targeting with keyword next

data-qtoggle-selector="next"
next element

targeting with keyword siblings

sibling #1
data-qtoggle-selector="siblings"
sibling #2
sibling #3

targeting with keyword parent reset

I am a sibling paragraph in the same parent div

hide parent ( and me, of course ).

targeting with keyword this reset

data-toggle-selector="this"

targeting with keyword self ( synonymous with 'this' ) reset

data-qtoggle-selector="self"

Effects reset all

Fade out the target (don't toggle)

data-qtoggle-effect="fade"
target

Only show hidden target data-qtoggle-effect="show" (don't toggle)

only show hidden target

Fade toggle the target data-qtoggle-effect="fadeToggle"

data-qtoggle-effect="fadeToggle"
target

Slide toggle the target data-qtoggle-effect="slideToggle"

data-qtoggle-effect="slideToggle"
target

Extras

Change the inner html of the control with data-qtoggle-event="show target"

hide target
target

Hide one target and show another

swap targets
target A

Hide one target and show another, slowly

data-qtoggle-duration="900" data-qtoggle-easing="swing"
target A

toggle the target and fire a callback function on animation completion

data-qtoggle-callback="exampleCallback"
var exampleCallback = function(){
    alert('callback fired.');
}

Toggle class on element

data-qtoggle-class="important" data-qtoggle-effect="toggleClass"
this text is red when class 'important' is applied.