Using multiple accordion in jquery with single function

Caution: Audio may begin with Music!!

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 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, pass two variables to the function. first parameter is the link field with which we click to toggle, the second parameter is the division which 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 accordion or not..

Click to rate this post!
[Total: 0 Average: 0]
Shares

Recommended Articles

Leave a Reply

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

Pin It on Pinterest

Shares