No easy way to add/remove folds after construction

[lBodia]

Hi! Is it possible to fully destroy and init again accordion with the same container? (In case if items there have been changed)

When I call just update, it doesn't init recently added folds, and when I init a new accordion, I see the all previous are not deleted.

[Alhadis]

When I call just update, it doesn't init recently added folds

When you say "init recently added folds", what are you referring to exactly?

[lBodia]

@Alhadis, sorry, I explained it a bit unclear.
I didn't create any folds, I just dynamically change accordion items, by adding and deleting HTML items from it. And to make those items work, I had to init this accordion again.
I'm just wondering, is it possible to destroy the previous accordion object, because I saw that it was still kept in accordions array.

[Alhadis]

Short answer: no it's not possible because it shouldn't be needed. Accordions can be disabled and reenabled programmatically after construction, which is (almost) the same as destroying and recreating it.

What you're experiencing is a limitation caused by a pretty stupid oversight on my behalf... one I'm surprised I never noticed earlier — there's no way of dynamically adding or removing accordion folds.

I'll need to fix this. In the meantime, you can use this ugly and illogical workaround:

Click to show

// Usage:
let el = document.createElement("li");
el.innerHTML = "<h3>Foo</h3><div>Bar</div>";
addFold(el, document.querySelector(".accordion"));

function addFold(element, accordion){
	if(!(accordion instanceof Accordion))
		accordion = Accordion.getAccordion(accordion);
	const prev = accordion.folds[accordion.folds.length - 1];
	const fold = new prev.constructor(accordion, element);
	accordion.folds.push(fold);
	prev.nextFold = fold;
	fold.previousFold = prev;
	if(element.parentElement !== accordion.el)
		accordion.el.appendChild(element);
	accordion.update();
	return fold;
}

function removeFold(fold){
	if(fold instanceof HTMLElement)
		fold = Accordion.getFold(fold);
	const {parentElement} = fold.el;
	parentElement && parentElement.removeChild(fold.el);

	const {folds} = fold.accordion;
	const index = folds.indexOf(fold);
	if(~index){
		const prev = folds[index - 1];
		const next = folds[index + 1];
		folds.splice(index, 1);
		prev.nextFold = next;
		if(next)
			next.previousFold = prev;
	}
	fold.accordion.update();
}

As for destroying an Accordion instance... well, as mentioned before, it shouldn't be necessary, but now that I think about it, it would benefit applications needing to perform a clean teardown of their state. That's unrelated to this issue, however.