About Me

My Photo

one who looks outside, dreams
one who looks inside, awakens!!

Oct 12, 2013

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 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!!! :)