Accordion Card Open by default

I have a single accordion card I’d like open by default. IS there a way to set that?

On the Card you wish to have open, select the Collapse control from the App Structure Capture_1
then select the Show checkbox on the Collapse Propertied panel.
Capture_2

To add to what Lee has said, you will also need to add a class of ‘show’ to the relevant collapse region, as in

1 Like

Thanks Ben, that did it!

Just between you and me, I think that the ‘show’ checkbox is supposed to add the ‘show’ class rather than insert 'show=“true” ’ which does nothing.

1 Like

Yes, the show checkbox is very confusing

Actually there is a very good reason for the ‘show’ toggle to be an attribute.

This is because we have a special App Connect component for collapse and it works with attributes as well, not only classes. The component allows us to hook the bootstrap events and pass them to app connect so you can add more dynamic functionality on collapse/expand

But the question comes down to how did you define the collapse? If it has the attribute is="dmx-bs4-collapse" then it is the App Connect component (which is default when you insert it through the UI) and then the show attribute should work.

If it is just a regular Bootstrap 4 collapse (just has the ‘collapse’ class on it not an ‘is’ attribute) then only the ‘show’ class will work.

Anyway to make difference of those two components, I think we will just implement them both separately as regular collapse and dynamic collapse and not as a single one like now. And you will be able to convert from static to dynamic :slight_smile: so no breaking changes.

2 Likes

Added the card through the UI. Checking or unchecking the ‘Show’ box made no difference.

This was improved in Wappler 1.9.7

I know this is a rather old thread, but my questions relate directly to what was discussed.

I’m not clear how controlling open panels should be done; it doesn’t seem to be working as expected. There seem to be several ways to control the panel state: the class ‘show’, the attribute ‘show’ and the dynamic attribute dmx-bind:show.

I think the ‘show’ attribute should mean this panel is open by default, but it isn’t:

As Ben suggests, it works if the class ‘show’ is added, but this shouldn’t be necessary as the attribute is='dmx-bs4-collapse' is included.

Using the Collapse Show dynamic attribute doesn’t seem to work with or without is='dmx-bs4-collapse'. I would have thought this should work, but it doesn’t:

Nor does this:

It seems the only way of controlling which panels are open by default is by removing is='dmx-bs4-collapse' and using a Class Toggle dynamic attribute:

Is there still a bug or am I doing something wrong?