I’ll be happy to share it once I’ve cleaned it up. I’ll be glad to share it. I’ll also take a look at adding support for PDF and video.
1 Like
Is this why you had your major crash with that Gary helped with? I hope you are happy again and sorted!
Yes, there are so many properties for this component that it was easy to get it messed up. But it is all up and running again. Just a couple of enhancements to make over the next few days, and it will be nice and tight.
It will be completely configurable.
I have not done anything with displaying other media, yet!
I had a look at collections but can not find any documentation also looked on Tailwind site and nothing there so haven’t a clue where to start!
Good luck awaitng a look! TIA for all your input!
Yes, it was very tedious trying to figure out how to get the collections to work, but once I did it started to make sense, It is the perfect solution for something like this as it allow you to have as many items as you like.
The way I figured it all out was I downloaded one of the sample collection components from GitHub and used that to learn how they are put together.
The properties list has expanded dramatically from the first version I showed. Almost everything can be controlled with them.
1 Like
Couple of the components on Github use collections for reference
Yes, I started from one of those to learn how to do it.
This component turned out to be a much more complicated project than initially anticipated. This component has a LOT of properties to make it super configurable. I still have a few more to add before I’m willing to call it done. I have not attempted to do anything with other formats, such as PDF and video, as that’s something for another day.
I’ll post a video of it in action later once I have finished adding the remaining properties.
Here is a brief video showcasing the component in action. There are two versions here with differing image placements. Also, note the image placements changing on mobile. I will try to add a screenshot of all the settings. There are a LOT of them
Let’s see if we can get this very long screenshot to upload that shows all of the settings.
Almost everything about the component can be controlled with these settings. Now that it is nearly done I have to put it to real world use on one of my sites. That will help uncover any missing features or bugs. I have been testing and refining it for days with the help of ChatGPT, which was a slow and sometimes painful process, but we got there in the end.
There were a lot of things I would have preferred to do differently, but I ran into a number of issues that were not easy to resolve, especially around the use of drop zones. So I ended up sticking with the simplest approach, for now.
2 Likes
Looks good with my version the container stays the same size but on your video the container elongates with the size of accordion. Is this what happens or is it just on video? If it does your next challenge is to fix the size of container to constant.
Well done!
Aloha Paul, @PMUK
There is an option that allows you to do either. If you select “intrinsic,” the container will resize; if you choose “contained,” the inner column will grow and enable scrolling, allowing the accordion column to scroll within the group.
As I mentioned, there are options to control almost all aspects of the component.
Added support today for persisting the state of the accordions, so that even if you leave the page and return, it remembers which accordions were expanded. You can have “n” groups on a page, and it will remember them for each group. The only requirement is that you have to provide a unique identifier for each group you create.
2 Likes