Using multiple accordion in jquery with single function

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

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

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 an accordion or not.

You may also read jQuery to export HTML table data into Excel sheet

Shares

Recommended Articles

Leave a Reply

Pin It on Pinterest

Shares