Add collapsible component

[MonaAghili]

We need a new hook to reimplement the menu and accordion components

[Neophen]

Make sure to check this out.
Accordion items don't need js by default, unless you want to support very old browsers

https://dev.to/neophen/css-only-accordion-with-animations-2d8n

[shahryarjb]

Hi @Neophen ,
Yes, we’re considering all the aspects, but based on our experience, working with raw CSS and native browser elements hasn't always given us the best results—especially when it comes to animations. Some of these native elements come with built-in behaviors that browsers enforce, and they’re not always easy to customize or adapt to different use cases.

That said, we haven’t made a final decision yet. Ideally, we’re looking to create something smart—similar to what we did with ScrollArea—so we can better manage the dependencies and components we need throughout the project.

In some cases, when we push ourselves too hard to rely solely on CSS—especially using Tailwind directly in the HTML—we end up having to work around things in a way that increases the page payload. This is particularly noticeable in LiveView, where the component is sent along with the full diff.

We experienced this with a carousel we built; in the first version, it reached about 120KB. After a lot of adjustments, we managed to bring the size down to a reasonable level, but unfortunately, we still had limited flexibility when it came to animations (the new version is JS).

At the moment, LiveView has quite a few limitations in providing solid JavaScript APIs, which has forced us to rewrite some components in JS—even though we’d really prefer not to.

---

The things you shared actually exist in different forms in our own project as well. But we’re looking for a cleaner hook with solid features to work with. Fortunately, with the development of our project IgniterJs, many of our challenges have been resolved, and we’re now able to reach the level of detail we want much more easily.

In this version, we’re also using IgniterCss, which we developed to fully support the DaisyUI library and to better prepare for the upcoming Tailwind release—while avoiding repetitive utility classes in our HTML.

It’s taking a bit of time, but we’ll be opening an issue soon, and we really hope folks like you will join the discussion and share your thoughts and possible solutions.

Thank you in advance