Configure accordion (Expanded Layout) element

Hi there!

I’m new to WeWeb. How can I configure the Accordion (Expanded Layout) element to only close when clicking the header. Currently, it closes when clicking the content of the accordion as well.

The content of the accordion is a data grid with the preferred ability to click on data within the table.

Thanks!

Hi @mander!

Are you sure you put the content of your accordion, in your case, the datagrid, in the area with the content label? (the 3rd flexbox in the navigator)

2023-08-24 2.43.12 PM

Let me know if it’s ok for you :slightly_smiling_face:

1 Like

Resolved, thank you for the help!

2 Likes

Hi, how can I default the accordian to have an opened state on page load?

Bump :slight_smile:

Currently there isn’t an option to do so with the accordion, at least not in the interface.

Do you only have one accordion? If so, you could probably make your own using divs and some variable logic

Luka, how can I tell the accordion to be in the “Open” state based on a variable? The fact that there’s no option to keep the accordion open on page load is a bug in that element IMO, because that is basic expected functionality with an accordion. I just spent hours last night rebuilding my custom built left nav to include accordions, only to find out they display as closed on every page load. My app isn’t published yet, so I’m switching pages in the editor preview. My accordions exist on a Multi-Page element, so if multiple pages use that nave element, I thought pages aren’t reloaded. (I thought that was the whole point of the Multi-page element) am I missing something about how Multi-page elements work?

You are completely right and there should be an option for an accordion’s state to be bound to a variable

While we work on that, there is a hacky workaround and that is:

  • Have a variable keeping the name of the active accordion
  • On page load have a multi-option branch with the parameter of the active tab name
  • Depending on the tab name, trigger a ‘Trigger component action’
  • Select proper accordion and select Open

The accordion should stay open on page change if you use multi-page sections. you can send me a link to your project and i can take a look though

1 Like

Thanks Luka. Since I posted that, I’ve rebuilt my own accordion from scratch, and its controlled by variables.

WRT Multi-page elements, If (In the WeWeb Editor) I switch between 2 pages that share a multi-page element, the editor page is reloading when I switch back and forth between these pages. Is this normal? My app isn’t published yet, so I can’t test it in production.

This will only happen in the editor. In the published app, the multipage sections won’t be rendered again.

2 Likes

Accordion element has been updated now to expose its value just like inputs do. Thanks for your feedback

hey @luka - you mean through the init value field? Is it intended to receive a boolean that corresponds to On/Off?

I’m not able to get to it to behave in a way to control openness by variable.

Maybe I’m misunderstanding.

Thanks!

Yes, by binding the init value field you can get to close or open the accordion.

You can also use a workflow action ‘Change variable value’ and select ‘Accordion - value’ to change it to be opened or closed

1 Like

Thanks, @luka

For anyone else playing with these, I found that the Accordion - value variable in workflows needs to be set to a value of “On” (not just the boolean, true) to be set to open. Then using reset variable correctly closes it (assuming you have init value set to Off)

Actually seem to be running into a small issue here with one of the accordions. Mind pointing me in the right direction, @luka?

I tried the same approach and it works for me, can you send me your editor link(just copy it from the address bar on any page)

@luka messaged you - thanks!

For anyone coming with a similar problem, a simple recreation of the accordion causing the problem solves the situation. However, if you experience any problems please report them to me.