Writing a Plugin Toggle The Rows

Posted By : Mohit Sharma | 06-Aug-2018

Writing our own row-toggle Plugin is relatively easy to do.

In this example, we'll use simple jQuery functionalities to create parent-child relationship between the rows and toggle when on click.
We need to fulfill the following requirements:
1. Add a class to identify the parent element.
2. Add a prefix with parentId to child rows.
3. Provide below-mentioned attributes to successfully configure our plugin Example initialization in javascript code:

           
initRowToggle("myTable");
var initRowToggle = function(tableBodyId){
		$JQ("#"+tableBodyId).rowToggle(
			{background : 'whitesmoke',
        	titleE : 'Click to collapse',
        	titleC : 'Click to expand',
        	toggleId : 'togglebtn',
        	delay: 'fast',
        	child_prefix: 'child-',
        	parentClass: 'parent',
        	expandClass: 'togglebtnMinus',
        	collapseClass:'togglebtnPlus'});
};

Configuration:

background // Color to fill in Parent Row. Example- 'whitesmoke'

titleE // Message when user hover on Parent row while a row is Expanded. Example- 'Click to collapse'

titleC // Message when user hover on Parent row while a row is Collapsed. Example- 'Click to expand'

toggleId // Id of toggle div element. Example- 'togglebtn'

collapseClass // Class to add Toggle element while collapsing the row. Example- 'togglebtnPlus'

expandClass // Class to add on Toggle element while expanding the row. Example- 'togglebtnMinus'

delay // Delay effect while toggling. Example-'fast' child_prefix // Example- Prefix to detect child rows. 'child-'

parentClass // Class to detect parent element. Example- 'parent'

Usage: Initialize when table is ready with data and supply table body id.

Purpose: Expand/Collapse table rows maintaining parent contains children view. Plugin code:

(function($){

    $.fn.rowToggle = function(options){
    	options = $.extend({
        	background : options.background,
        	titleE : options.titleE,
        	titleC : options.titleC,
        	toggleId : options.toggleId,
        	delay: options.delay,
        	child_prefix: options.child_prefix,
        	parentClass: options.parentClass,
        	expandClass: options.expandClass,
        	collapseClass: options.collapseClass}
        ,options);
    	
    	return $(this).find('tr').each(function(e){
		      $('tr.parent').css("cursor", "pointer").css("background",options.background).attr("title", options.titleC).click(function(e) {
		    	  $(this).find("#"+options.toggleId).attr("title", options.titleC);
		    	  if(e.target.id == options.toggleId){
		        	  if($(this).siblings('.'+options.child_prefix + this.id).is(":visible")){
			              $(this).find('span#'+options.toggleId).removeClass(options.expandClass).addClass(options.collapseClass);
			              $(this).find("#"+options.toggleId).attr("title", options.titleC)
		        	  }else{  
			        	  $(this).find('span#'+options.toggleId).removeClass(options.collapseClass).addClass(options.expandClass);
			        	  $(this).find("#"+options.toggleId).attr("title", options.titleE)
			          }
			          $(this).siblings('.'+options.child_prefix+ this.id).slideToggle(options.delay,"linear");
		    	  }
		      });
          return false;
	});
  }
   
})(jQuery);

Above code will the the child rows associated with their parents with parentId.Once it finds all the rows it will toggle their visibility based on togglebtn id provided the configuration and also i'll toggle the title attribute accordingly.

Note: Place above code in separate file with any name. Example: rowToggle.js and then import this in you html file.