Toggle Visibility Or CSS Classes Of Elements - jQuery qToggle

File Size: 9.05 KB
Views Total: 109
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Toggle Visibility Or CSS Classes Of Elements - jQuery qToggle

qToggle is a versatile jQuery content toggle 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.

It can be used for a multitude of use cases, such as creating dynamic dropdown menus, revealing hidden content on demand, or managing the appearance of elements based on user preferences.

How to use it:

1. Download and load the jquery.qtoggle.js plugin.

<!-- jQuery is required -->
<script src="/path/to/cdn/jquery.min.js"></script>

<!-- jQuery qToggle Plugin -->
<script src="/path/jquery.qtoggle.js"></script>

2. Attach the plugin to all elements that have the data attribute 'data-qtoggle-selector'.

$(function(){
  $('body').qToggle();
});

3. Create toggleable elements as follows.

<!-- Basic Usage -->
<a href="#" 
   data-qtoggle-selector=".target" 
   data-qtoggle-text="Show Info" >
   Hide Info
 </a>
<div class="target">
  I am the div that you can hide and show.
</div>

<!-- Toggle The Prev Element -->
<a href="#" 
   data-qtoggle-selector="prev" >
   Toggle
</a>

<!-- Toggle The Next Element -->
<a href="#" 
   data-qtoggle-selector="next" >
   Toggle
</a>

<!-- Toggle The Parent Element -->
<a href="#" 
   data-qtoggle-selector="parent" >
   Toggle
</a>

<!-- Toggle The Siblings -->
<a href="#" 
   data-qtoggle-selector="siblings" >
   Toggle
</a>

<!-- Toggle The Element Itself -->
<a href="#" 
   data-qtoggle-selector="self" >
   Toggle
</a>

4. Apply fade or slide animations to the elements when toggled.

<a href="#" 
   data-qtoggle-selector=".target" 
   data-qtoggle-effect="fadeOut">
   Fade Out
</a>

<a href="#" 
   data-qtoggle-selector=".target" 
   data-qtoggle-effect="show">
   Don't toggle
</a>

<a href="#" 
   data-qtoggle-selector=".target" 
   data-qtoggle-effect="fadeToggle">
   Fade Toggle
</a>

<a href="#" 
   data-qtoggle-selector=".target" 
   data-qtoggle-effect="slideToggle">
   Slide Toggle
</a>

<a href="#" 
   data-qtoggle-selector=".target" 
   data-qtoggle-effect="slideToggle"
   data-qtoggle-easing="swing">
   With Easing
</a>

<a href="#" 
   data-qtoggle-selector=".target" 
   data-qtoggle-effect="slideToggle"
   data-qtoggle-duration="900">
   Configurable Duration
</a>

<a href="#" 
   data-qtoggle-selector=".target" 
   data-qtoggle-effect="slideToggle"
   data-qtoggle-callback="exampleCallback">
   With A Callback
</a>

5. Toggle the CSS class(es) of the targer element.

<a href="#" 
   data-qtoggle-selector=".target" 
   data-qtoggle-class="important" 
   data-qtoggle-effect="toggleClass">
   Toggle CSS Class
</a>
<div class="target important">
  This text is red when class 'important' is applied.
</div>

6. All possible plugin options.

$('body').qToggle({

  // object - passed into event (reserved for later use)
  'data': {},

  // string - the animation effect on target        
  'effect': 'toggle',

  // string - the event on control (namespaced)    
  'events': 'click.qToggle',

  // string - a selector that defines a control
  'context': '[data-qtoggle-selector]',

  // string - the name of the data that holds selector string of target
  'selector': 'qtoggle-selector',

  // string - the default target if none is specified in settings.selector  
  'targets': 'prev',

  // string - html to insert into control's text node. Empty string for no change                    
  'innerHTML': '',                         

  // string - a class name to toggle if using the toggleClass effect
  'toggleClass': '',   

  // object - arguments passed to the effect function
  'eventArgs': {        

    // int|string - duration of animation in miliseconds or keywords 'fast','slow',etc. 
    // Note that the default 'toggle' effect will always have 0 duration
    'duration': 'fast',         

    // easing function
    'easing':'linear',          

    // string|function - the function to call when animation is complete
    'callback': null 

  }
  
});

This awesome jQuery plugin is developed by natebot. For more Advanced Usages, please check the demo page or visit the official website.