Question

I’m using two accordion on my website.One is JqueryUI and other one is here:

http://www.adipalaz.com/experiments/jquery/nested_accordion.html

Now the issue is that both of them are using .accordion to initialize the accordion. And in this case only one will work.

Is there any way I can fix this function naming issue?

To initialize Jquery-UI I’m using this:

$( ".jquery-ui-accordion" ).accordion();    

To initialize the other one (Nested accordion) I’m using this:

$("html").addClass("js");
$.fn.accordion.defaults.container = false; 
$(function() {
  $("#acc3").accordion({initShow : "#current"});
  $("#acc1").accordion({
      el: ".h", 
      head: "h4, h5", 
      next: "div", 
      initShow : "div.outer:eq(1)"
  });
  $("#acc2").accordion({
      obj: "div", 
      wrapper: "div", 
      el: ".h", 
      head: "h4, h5", 
      next: "div", 
      showMethod: "slideFadeDown",
      hideMethod: "slideFadeUp",
      initShow : "div.shown",
      elToWrap: "sup, img"
    });
  $("html").removeClass("js");
});

}); 

Please note both of them are using .accordion() function.

Answer 1

Place this code right after jQuery UIs javascript include and before other accordions javascript include:

jQuery.fn.myCustomAccordion = jQuery.fn.accordion;
delete $.fn.accordion;

And then you can use both accordions, e.g:

// jQuery accordion
$( ".jquery-ui-accordion" ).myCustomAccordion(); 

// "Other accordion"
$("#acc3").accordion({initShow : "#current"});
...