Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Removing jQuery Accordion Item

How do you remove an item from a jQuery Accordion? I am trying to give the user the ability to delete an item from a database, displayed in an accordion, and have that item fade out after. I tried hiding the parent DIV of the item but the header remains and the accordion does not function properly after.

Here is the markup (basic accordion usage):

<div id="accordion">
<h3><a href="#">The Title - Item 1</a></h3>
<div>
The Content - Item 1
<a href="#" class="deleteItem">Delete</a>
</div>
<h3><a href="#">The Title - Item 2</a></h3>
<div>
The Content - Item 2
<a href="#" class="deleteItem">Delete</a>
</div>
</div>

Thanks!

like image 963
NightMICU Avatar asked Mar 06 '11 19:03

NightMICU


1 Answers

assuming you're in the click event of a child of the content div, it would look something like this:

var parent = $(this).closest('div');
var head = parent.prev('h3');
parent.add(head).fadeOut('slow',function(){$(this).remove();});

here is a working example. not sure about the accordion not working afterword, but if it doesn't, try and re-initialize it.

like image 53
nathan gonzalez Avatar answered Oct 06 '22 05:10

nathan gonzalez