Show/Hide accordion panels based on select option value.

Show/Hide the accordion tabs based on the user selection of selectbox option.


<div class="selectbox">  
	<label>Select Fruit:</label>
	<select id="fruit-types">
		<option>--Select Fruit--</option>
		<option value="all">All</option>
		<option value="apple">Apple</option>
		<option value="orange">Orange</option>
		<option value="grapes">Grapes</option>
		<option value="pineapple">Pine apple</option>
		<option value="guava">Guava</option>


	$(document).ready(function() {
	$(".fruit-section .panel-collapse").removeClass("in");
	  $("#fruit-types").change(function() {
		var fruit = $(this).val();
		if (fruit == "all") {
		  $(".panel .panel-collapse").addClass("in");
		} else if (fruit == "Apple") {
		  $(".panel .panel-collapse").removeClass("in");
		  $(".apple .panel-collapse").addClass("in");
		} else if (fruit == "Orange") {
		  $(".panel .panel-collapse").removeClass("in");
		  $(".orange .panel-collapse").addClass("in");
		} else if (fruit == "Grapes") {
		  $(".panel .panel-collapse").removeClass("in");
		  $(".grapes .panel-collapse").addClass("in");
		} else if (fruit == "Pine apple") {
		  $(".panel .panel-collapse").removeClass("in");
		  $(".pineapple .panel-collapse").addClass("in");
		  console.log("Pine apple");
		}else if (fruit == "Guava") {
		  $(".panel .panel-collapse").removeClass("in");
		  $(".guava .panel-collapse").addClass("in");


See the Pen Show/Hide accordion tabs based on selectbox value selection by vinothkumar rajendran (@vinoth102) on CodePen.

Continue Reading

Swiper Jquery Plugin

It is a modern mobile touch slider.


<link rel="stylesheet" href="" />


<script src=" "></script>

It has lot of components.

  • Swipe slider navigation
  • Swipe pagination
  • Swipe pagination with dynamic bullets
  • Progress pagination
  • Fraction pagination
  • Custom pagination
  • Page Scrollbar
  • Vertical page slider
  • Space between slides
  • Multiple slides per view
  • Scroll container
  • Multiple row slides layout
  • Nested swipers
  • Loop mode carousel
  • Loop mode with multiple slides per group
  • 3D cube effect
  • 3D coverflow effect
  • 3D Flip effect
  • Mousewheel control
  • Autoplay carousel
  • Dynamic slides (append/prepend slide pagination)
  • Thumbs gallery with two-way swipe
  • Parallax (Parallax scrolling is a web site trend where the background content (i.e. an image) is moved at a different speed than the foreground content while scrolling.)
  • Responsive breakpoints slider
  • Auto height slider
  • Zoom slider
  • Slideable navigation drawer


Continue Reading

What are the best practices of Javscript coding?

Best Practices for Javascript Coding

Inclusion of Code

  • Use external JavaScript files. Do NOT include JavaScript in-line in the page unless there is a good reason.
  • Use the <script> tag to include your JavaScript files at the bottom of your HTML document just before the closing </body> tag. For optimal page performance, concatenate your JavaScript into separate file.

Formatting of Javascript Code

  • Open braces are preceded by a single space.
  • Open braces should appear on the same line as their preceding argument.
  • Close braces should appear at the same indentation as the statement preceding the opening brace.
  • There should be no space characters between parentheses and their contents.
  • Use semicolons and do not rely on automatic semicolon insertion.
  • Each comma and colon (and semi-colons that don’t end a line) should be followed by a single space.

Variable declaration

To avoid confusion between global and local variables, we declare each variable on its own line with the var keyword. We do not use a single var keyword and then chain several variable declarations onto it separated by a comma.

Variable Names and Types

  • Variable names should be Camel Case.
  • Objects, classes, and name-spaces should be Title Case.
  • Boolean values should be prefixed with is if at all possible.
    Cached JQuery objects can be prefixed with $.
  • Use shorthand versions of empty Arrays and Objects.


// some examples
var exampleValue ='my example variable value';
var numberOfTimes =3;
// booleans
var isThisWorking =true;
var isNotWorking =0;
// cache a selector
var $body =$('body');
// short hand objects and arrays
var newObject ={};
var newArray =[];

Limit Events โ€” Use Event Delegation

With jQuery this is easy, simply use the on method with a selector:

// this only runs if the a.scroller is matched

Too many events bound on a page can mean memory leaks or just an accumulation of handlers bound to DOM elements which becomes less and less efficient over time.

Additionally, event delegation has the added benefit of persisting events over dynamic page updates when items are added or removed from the DOM.

More code practices

  • Avoid using document.write.
  • Only run scripts on a page that are needed for that page.
  • Don’t repeat yourself (i.e. keep your code DRY)
  • Do not modify JavaScript core objects .prototype unless you really know what you’re doing.
  • Use method names that make sense, such as init() or setup() for code that starts things off. Be consistent on your project.
  • Binary and ternary operators should have a single space on each side.
  • Quoted values should be in ‘single quotes’ so that double quotes may easily exist inside them.
  • Comment JavaScript code thoroughly and consider using a pattern such as those described by JSDocs so that documentation may be generated automatically.
  • Conditional statements go on a new line followed by the opening brace. Else/else go on the same line as the brace.
  • Use type strict checks with === as opposed to == whenever possible.
Continue Reading

Change the background color of table row when select a checkbox

Change the background color of table row by checking checkbox using Jquery


 $(function() {
    $('td:first-child input').change(function() {
        $(this).closest('tr').toggleClass("highlight", this.checked);


  • Change method is used to identify the event change of checkbox.
  • We can set some CSS properties to class name ‘highclass’ for changing the background color.


See the Pen Change the background of table row when select a checkbox by Vinothkumar Rajendran (@fedtutorial) on CodePen.0

Continue Reading

How to do Form Validation using Jquery?

Form validation using Jquery

Include the Jquery library and jquery.validate file.

Include below JS files

<script src=""></script>
<script src=""></script>


  $(function() {
rules: {
         firstname: "required",
		  password: {
			required: true,
			minlength: 6
         email: {               
             required: true,
             email: true
messages: {
			firstname: "Enter First Name",
			 password: "Enter Passowrd",
			 email: "Enter Valid Email ID"
		 submitHandler: function(form) {



Validate method will apply to form. By using validate method we can define two arrays like rules and messages. In the rules, we can set the validation conditions to accept the given input. In the messages part, we should define the validation messages to show when the user entered the detail wrongly.


See the Pen Form validation using Jquery by Vinothkumar (@fedtutorial) on CodePen.0

Continue Reading

How to change the background color of odd and even rows?

Change the background color for odd and event rows using Jquery

‘Odd’ and ‘even’ pseudo classes are used to selecting the odd and even number of row.


   $('table tr:even').addClass('even');
    $('table tr:odd').addClass('odd');


By using odd and even classes we can set the required background color using CSS.


See the Pen Change the background color of add and event table rows by Vinothkumar Rajendran (@fedtutorial) on CodePen.0

Continue Reading

Popover / Tooltip using Jquey plugin

Popover implementation using Webui-popover

Webui-popover is a jquery plugin which is used for creating popover UI component.

Step 1:
Include webui-popover CSS in head section.

 <link rel="stylesheet" href="" />

Step 2:
Include Jquery library and webui-popover js files in head section.

 <script src=" "></script>
 <script src=""></script>

Step 3:
Call the webuipopover method to trigger the popover on the selected element.

                constrains: 'horizontal', 
                multi: true,
                content: 'tooltip contents placed here...'


  • When click the corresponding selector (id or class name), script will trigger the webui-Popover on that target element.
  • Placement attribute specifies the tool-tip direction display. Different direction are there such as left, right, top, bottom, right-top, right-bottom, top-left, top-right.. etc.
  • We can put the tool-tip content within “content” attribute.
Continue Reading

Custom scroll using Jquery

Custom scroll implementation using mcustomscrollbar

Mcustomscrollbar is a jquery plugin. We will see the implementation steps below.

Step 1:
Include mcustomscrollbar CSS file in head section as below.

<link rel="stylesheet" href="" />

Step 2:

Inlcude Jquery library and mcustomscrollbar JS files in head section.

<script src=""></script>
<script src=""></script>

Step 3:

Call the following function with proper selector name.


Note: “.scroll-section” is the class name of content section which we have to trigger the custom scroll.

Continue Reading