jQuery UI Accordion - Content is painted within the title when sortable is enabled

Question

I have a jquery ui accordion in my asp.net mvc4 view. I have followed what explained here:

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

I get below weird behaviour (see picture in following link)

http://snag.gy/lcEen.jpg

as you can see i have two header titles, Filter and Add Component. The weird behaviour is for example in case Filter, the content is being painted within the title "Filter", why? the same happens for "Add components" title.

HTML Code (below is within a jQuery ui tab):

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

in my script section i have below:

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

Answer 1

The problem is that you set up the accordion without the header property and try to add it later when setting the sortable. You must set it when you're building the accordion widget, like this:

function subscribe_accordion_to_hoverintent_event(accordionId) {
    $(accordionId).accordion({
            header: "> div > h3",
            event: "click hoverintent"
        });
    }

And you can remove it from the sortable function:

function set_accordion_as_sortable(accordionId) {
        $(accordionId).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");
              }
        });
    }

JSFiddle result: http://jsfiddle.net/hNp2z/1/

Also, the id's in your question don't match, be sure to check those too.