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

Expandable/collapsible fieldset or panel about kvision HOT 2 CLOSED

chavu commented on August 12, 2024

Expandable/collapsible fieldset or panel

from kvision.

Comments (2)

rjaros commented on August 12, 2024

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."
}