Проблема в использовании JQuery UI Accordion

Question

Я пытаюсь использовать JQuery Accordion, однако я сталкиваюсь с трудностями при написании кода.

 <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>

Я хочу изменить содержимое div ниже первого заголовка, когда пользователь щелкает заголовокОднако я не могу понять, как я должен написать функцию привязки и что еще упомянуть в функции аккордеона

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

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

Предполагается, что HTML-содержимое, подлежащее замене, присутствует в

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

Answer 1

Из документации :

$('.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
});

Таким образом, вы можете использовать функции jQuery для замены содержимого элемента:

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

или предоставить обратный вызовпри инициализации:

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

Answer 2

$('.ui-accordion').bind('accordionchange', function(event, ui) {
  $("<div/>", {html : "Hello World"}).appendTo(ui.newContent);
});