Expandable/collapsible fieldset or panel

[chavu]

How can I make a fieldset or panel or section expandable and collapsible?

[rjaros]

There are different ways. If you are using bootstrap module, you can just implement bootstrap collapse component (https://getbootstrap.com/docs/5.3/components/collapse/):

button("Toggle bootstrap collapse") {
    setAttribute("data-bs-toggle", "collapse")
    setAttribute("data-bs-target", "#panel")
    setAttribute("aria-expanded", "false")
    setAttribute("aria-controls", "panel")
}
div(className = "collapse") {
    id = "panel"
    div(className = "card card-body") {
        +"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante."
    }
}

You can also manage component visibility directly:

lateinit var panel: Div
button("Toggle direct") {
    onClick {
        panel.toggleVisible()
    }
}
panel = div(className = "card card-body") {
    visible = false
    +"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante."
}

If you like more reactive way here you have:

val visibleState = ObservableValue(false)
button("Toggle reactive") {
    onClick {
        visibleState.value = !visibleState.value
    }
}
div(className = "card card-body").bind(visibleState) {
    visible = it
    +"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante."
}

[chavu]

Thank you. I used the reactive approach