How can we collapse a ui.expansion?

[smojef]

Is there a way to collapse a ui.expansion that is expanded after a button is pressed?
Also how can we have a ui.expansion that is expanded by default?

[falkoschindler]

That's not obvious, but we can use Quasar props to make it work:

with ui.expansion('Expansion') as e:
    ui.label('Some content')

ui.button('Open', on_click=lambda: e.props('model-value'))
ui.button('Close', on_click=lambda: e.props(remove='model-value'))

We should think about improving this API. Similar to ui.dialog we could derive from ValueElement so that value becomes a bindable property and an initializer parameter.

[smojef]

It half works. We can make it expanded by default using:

with ui.expansion('Already Expanded').props('model-value'):
    ui.label('Some content')

Unfortunately I was not able to collapse with code once the user expands it.

[falkoschindler]

I see. When the user opens the expansion, the model-value is not transferred to the server. Thus there appears to be nothing to do if model-value is toggled programmatically.

But all this is fixed on main and in the upcoming version 1.1.5 where ui.expansion is a proper ValueElement with everything being correctly wired up.

[smojef]

To collapse an expanded element, is there a ui.run_javascript command that could be executed perhaps?

[falkoschindler]

Great idea! And it's even better: Quasar's ExpansionItem has show and hide methods we can use as follows:

with ui.expansion('Expansion') as e:
    ui.label('Some content')

ui.button('Open', on_click=lambda: e.run_method('show'))
ui.button('Close', on_click=lambda: e.run_method('hide'))

[Diegiwg]

Well, using the Quasar method mentioned by @falkoschindler works great.
However, in pure JS, there is the option:

async def exp_btn():
    _ = await ui.run_javascript(
        "const el = document.querySelector('.__EXP__'); if(el) el.firstChild.firstChild.click(); return el"
    )

with ui.expansion("Expansion") as e:
    e.classes(add="__EXP__")
    ui.label("Some Content")

ui.button("Open/Close", on_click=exp_btn)

Just giving you an option, for cases where you really need to work with direct JS, but in your case, use the Quasar methods.

[smojef]

But all this is fixed on main and in the upcoming version 1.1.5 where ui.expansion is a proper ValueElement with everything being correctly wired up.

Thanks! ui.button('Close', on_click=lambda _:setattr(element, 'value', False)) works nicely with 1.1.5.

[falkoschindler]

I might have forgotten to mentioned it here, but ui.expansion has open and close methods since PR #330 and version 1.1.5:

with ui.expansion('Expansion') as e:
    ui.label('Some content')

ui.button('Open', on_click=e.open)
ui.button('Close', on_click=e.close)