Question

I am trying to use JQuery Accordion, however I am facing a difficulty in writing the code.

 <div id="accordion">
    <h3><a href="#" id="first">First header</a></h3>
    <div id="first_content">First content</div>
    <h3><a href="#" id="second">Second header</a></h3>
    <div id="second_content">Second content</div>
</div>

I want to change the content of the div below the first heading when the user clicks the heading, however I am not able to understand that how I should write the binding function and what else to mention in the accordion function

$( "#accordion" ).accordion({
   change: function(event, ui) { what to write in here }
});

$( "#accordion" ).bind( "accordionchange", function(event, ui) {
  what to write in here
});

Supposing the HTML content to be replaced with is present in

var html = '<h1>Accordion Usage</h1>';

Answer 1

From the documentation:

$('.ui-accordion').bind('accordionchange', function(event, ui) {
  ui.newHeader // jQuery object, activated header
  ui.oldHeader // jQuery object, previous header
  ui.newContent // jQuery object, activated content
  ui.oldContent // jQuery object, previous content
});

So you can use the jQuery functions to replace the element content:

$( "#accordion" ).bind( "accordionchange", function(event, ui) {
    ui.newHeader.html("<h1>Accordion Usage</h1>");
});

or you can supply the callback at initialization:

$( "#accordion" ).accordion({
    change: function(event, ui) { ui.newHeader.html("<h1>Accordion Usage</h1>"); }
});