custom accordion jquery

Margin and Padding

Try applying margin-bottom:5px; to .ui-accordion-header.
This will cause a gap between the open header and it's content, but you can fix that by removing the margin on .ui-accordion-header.ui-state-active and applying it to .ui-accordion-content-active instead.
So your css would look like this:
.ui-accordion-header {
margin-bottom:5px;
}
.ui-accordion-header.ui-state-active {
margin-bottom:0;
}
.ui-accordion-content-active {
margin-bottom:5px;
}
That might need a bit of tweaking, but should get you mostly there.

อ้างอิง http://stackoverflow.com/questions/3229723/jquery-ui-accordion-issue

สำหรับทดสอบ script online
http://jsbin.com/adele3/687/edit 

Extending Jquery accordion to rows of a table
http://stackoverflow.com/questions/16046654/extending-jquery-accordion-to-rows-of-a-table