Using multiple accordion in jquery with single function

Tags: jQuery

I was working on an application recently and i had to use accordion in multiple places and pages. Of-course this was a extra space and time. So, i came up with an idea to make my own accordion in
jQuery which can be called any time with help a single function.This could not be a complete solution, but certainly has re usability.
Today I will be sharing this knowledge with you all and hope it would be helpful.

First create a function pass two variables to the function. first parameter is link field with which we click to toggle , second parameter is the division which opens and closes data. rest is a simple logic as you can see.Note that parameter are nothing but your div ID’s.

var Toggled=false; 
$(document).ready(function() {
  function custom_accordion(linker,changer)
  {
    $('#'+linker).click(function(){
      if(Toggled==false)
      {
        $('#'+linker).html("Hide");
        $("#"+changer).fadeIn(100); 
        Toggled=true;
      }
      else
      {
        $('#'+linker).html("Change");
        $("#"+changer).fadeOut(100);    
        Toggled=false;
      }
      return false;
    });
  }
});

call this for each page and forget manual coding to check if you need to place accordion or not..

That’s it guys , feedback’s are welcome!!.

below are some other useful links, click and explore!!! 🙂

Code Snippets UX-UI

Join Discussion

Your email address will not be published. Required fields are marked *

All code will be displayed literally.