How to implement a button on a jQuery Sortable accordion header


I've been working on a jQuery custom sortable accordion for my website. The next stage to implement is a button on each header of the sortable accordion which will delete the section expandable list from the jQuery sortable accordion.

I have the code ready to use, however I cannot seem to overlay the button on the header without it being part of the header on click function to expand or drag function to sort, however I do want it to follow the the accordion upon being sorted.

function create_accordian(str) { $( str ) .accordion({ header: '> div > h3', autoHeight: false, active: false, collapsible: true, }) .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' ); } }); }

<a href="http://jsfiddle.net/JF7PD/4/" rel="nofollow">Fiddle</a>

I have tried modifying the CSS for the position tributes of the delete feature, the above jQuery code for where the header is defined, wrapping both in a div and defining the header separately. All my efforts have come to a dead end.

I need to be able to have a delete icon on each header which moves whilst being sorted and has a separate on click function so it does not expand or drag the accordion.

Best Regards, Tim


You need two sets of updates to achieve the desired goal. Note I added a class of .RemoveSection to your <span> with the 'X' icon to facilitate these examples.

First, create a .click() handler for the 'X' icon you have and in its first step, use .stopPropagation() (<a href="http://api.jquery.com/event.stoppropagation/" rel="nofollow">reference here</a>) to ensure its click event does not bubble up to the jQ UI sortable:

$('.RemoveSection').click(function(event){ event.stopPropagation(); });

Next, leverage the cancel option (<a href="http://api.jqueryui.com/sortable/#option-cancel" rel="nofollow">reference here</a>) for the jQ UI sortable widget to exclude your 'X' icon from being a handle for sorting:

.sortable({ axis: 'y', handle: 'h3', cancel: '.RemoveSection', // This excludes your 'X' icon 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' ); } });

Updated jsFiddle, forked from yours: <a href="http://jsfiddle.net/2aLec/2/" rel="nofollow">http://jsfiddle.net/2aLec/2/</a>

While I did not actually add the script to delete the sortable section, give it a go & post back if you need help. Your general approach should be to simply traverse up the DOM from your 'X' icon to the parent header, then remove it & its sibling <div> (and maybe kick off a .refresh() of the sortable for good measure).


  • How to activate jquery accordion from an image map href?
  • ExtJS 4 - How to display template having width greater than the width of combo-box?
  • CKEditor on focus remove default value
  • Ext js problem setting height dynamicly of a grid when autoHeight is already set
  • Slickgrid grouping expand/collapse strange behaviour
  • Turn off autofocus for bootstrap-select / select2
  • Prevent timepicker addon from opening calendar
  • ASP.NET Ajax
  • VBA: Extract Top 'x' Entries from each category
  • SSRS 2008 - Sorting within a group
  • 2-table interaction: insert, get result, insert
  • How to select table rows/complete table?
  • Wait for .each() .getJSON request to finish before executing a callback
  • Curried UDF - Pyspark
  • jersey/tomcat Description The origin server did not find a current representation for the target res
  • Magento get URL before current
  • How can I tell a form not to dispose a particular control when it closes?
  • SonarQube: Cannot deactivate rule with missing quality profile
  • How to add a focus style to an editable ComboBox in WPF
  • Visual Studio 2010 debugger build correctly - compiler pdb and linker pdb not in synch?
  • Installing iPhone App to iPhone
  • d3 v4 drag and drop with TypeScript
  • Custom Tabgroup Appcelerator
  • JQuery Internet Explorer and ajaxstop
  • Change JButton Shape while respecting Look And Feel
  • Opengl-es onTouchEvents problem or a draw problem? [closed]
  • recyclerView does not call the onBindViewHolder when scroll in the view
  • Where to put my custom functions in Wordpress?
  • Trying to switch camera back to front but getting exception
  • jQuery tmpl and DataLink beta
  • using conditional logic : check if record exists; if it does, update it, if not, create it
  • WPF Applying a trigger on binding failure
  • How to CLICK on IE download dialog box i.e.(Open, Save, Save As…)
  • Linking SubReports Without LinkChild/LinkMaster
  • Bitwise OR returns boolean when one of operands is nil
  • sending mail using smtp is too slow
  • XCode 8, some methods disappeared ? ex: layoutAttributesClass() -> AnyClass
  • costura.fody for a dll that references another dll
  • Binding checkboxes to object values in AngularJs
  • Unable to use reactive element in my shiny app