jQuery UI Accordion — содержимое отображается внутри заголовка, когда включена сортировка.

У меня есть аккордеон jquery ui в моем представлении asp.net mvc4. Я следовал тому, что объяснено здесь:

http://jqueryui.com/accordion/#sortable

Я получаю ниже странное поведение (см. рисунок по следующей ссылке)

http://snag.gy/lcEen.jpg

как видите, у меня есть два заголовка заголовка: «Фильтр» и «Добавить компонент». Странное поведение, например, в случае с фильтром, содержимое рисуется в заголовке «Фильтр», почему? то же самое происходит с заголовком «Добавить компоненты».

HTML-код (ниже находится на вкладке пользовательского интерфейса jQuery):

<style>
     /* IE has layout issues when sorting (see #5413) */
     .group { zoom: 1 }
</style>

      (...)

<div id="accordion1" style= "width: 790px;">
   <div class="group">
      <h3>Filters</h3>  
          <div>
             <!-- some stuff here -->
          </div>
   </div> <!--end group -->
   <div class="group">
      <h3>Add component</h3>
          <div>
             <!-- some stuff here -->
          </div>
   </div> <!--end group -->
 </div> <!-- end accordion -->

 <div id="accordion2" style= "width: 790px;">
   <div class="group">
      <h3>Filters</h3>  
          <div>
             <!-- some stuff here -->
          </div>
   </div> <!--end group -->
   <div class="group">
      <h3>Add others</h3>
          <div>
             <!-- some stuff here -->
          </div>
   </div> <!--end group -->
 </div> <!-- end accordion -->

в моем разделе сценария у меня есть ниже:

    $(function () {
        function subscribe_accordion_to_hoverintent_event(accordionId) {
            $(accordionId).accordion({
                event: "click hoverintent"
            });
        }

        subscribe_accordion_to_hoverintent_event("#accordion1");
        subscribe_accordion_to_hoverintent_event("#accordion2");
    });

    // Collapse content
    $(function () {
        function set_accordion_as_collapsible(accordionId) {
            $(accordionId).accordion({
                collapsible: true
            });
        }

        set_accordion_as_collapsible("#accordion1");
        set_accordion_as_collapsible("#accordion2");
    });

    // Sortable functionality
    $(function () {
        function set_accordion_as_sortable(accordionId) {
            $(accordionId).accordion({
                header: "> div > h3"
            }).sortable({
                  axis: "y",
                  handle: "h3",
                  stop: function (event, ui) {
                             // IE doesn't register the blur when sorting
                             // so trigger focusout handlers to remove .ui-state-focus
                             ui.item.children("h3").triggerHandler("focusout");
                  }
            });
        }

        set_accordion_as_sortable("#accordion1");
        set_accordion_as_sortable("#accordion2");
    });

    /*
    * hoverIntent | Copyright 2011 Brian Cherne
    * http://cherne.net/brian/resources/jquery.hoverIntent.html
    * modified by the jQuery UI team
    */
    $.event.special.hoverintent = {
        setup: function () {
            $(this).bind("mouseover", jQuery.event.special.hoverintent.handler);
        },
        teardown: function () {
            $(this).unbind("mouseover", jQuery.event.special.hoverintent.handler);
        },
        handler: function (event) {
            var currentX, currentY, timeout,
args = arguments,
target = $(event.target),
previousX = event.pageX,
previousY = event.pageY;
            function track(event) {
                currentX = event.pageX;
                currentY = event.pageY;
            };
            function clear() {
                target
.unbind("mousemove", track)
.unbind("mouseout", clear);
                clearTimeout(timeout);
            }
            function handler() {
                var prop,
orig = event;
                if ((Math.abs(previousX - currentX) +
Math.abs(previousY - currentY)) < 7) {
                    clear();
                    event = $.Event("hoverintent");
                    for (prop in orig) {
                        if (!(prop in event)) {
                            event[prop] = orig[prop];
                        }
                    }
                    // Prevent accessing the original event since the new event
                    // is fired asynchronously and the old event is no longer
                    // usable (#6028)
                    delete event.originalEvent;
                    target.trigger(event);
                } else {
                    previousX = currentX;
                    previousY = currentY;
                    timeout = setTimeout(handler, 100);
                }
            }
            timeout = setTimeout(handler, 100);
            target.bind({
                mousemove: track,
                mouseout: clear
            });
        }
    };