Could you give me a hint how I could call the "collapse" methods manually? <https://getbootstrap.com...

# kvision

[jschneider]

Could you give me a hint how I could call the "collapse" methods manually?
https://getbootstrap.com/docs/4.0/components/collapse/

I don't have that much experience with JS interop. Therefore I'd be glad if anybody could give me a hint how to call these methods on e.g. a div

[Robert Jaros]

The simplest case:

vPanel {
	lateinit var div: Component
	button("Toggle div").onClick {
		div.getElementJQueryD().collapse("toggle")
	}
	div = div(className = "collapse show") {
		+"Lorem ipsum dolor sit amet, consectetur adipiscing elit."
	}
}

[jschneider]

Thanks!

[Robert Jaros]

With data-* attributes:

vPanel {
	button("Toggle div") {
		setAttribute("data-toggle", "collapse")
		setAttribute("data-target", "#collapseExample")
	}
	div(className = "collapse show") {
		id = "collapseExample"
		+"Lorem ipsum dolor sit amet, consectetur adipiscing elit."
	}
}

[jschneider]

"this._$div_18.getElementJQueryD_37() is null"

[jschneider]

calling too early?

[Robert Jaros]

perhaps
do you call it from an event handler?

[jschneider]

Yes. From within "subscribe"

[Robert Jaros]

so it can be too early

[Robert Jaros]

try div.getElementJQueryD()?.collapse("toggle")

[jschneider]

probably the problem. Subscribe is evaluated immedately.

[Robert Jaros]

it should ignore those early calls

[jschneider]

it seems

div.getElementJQueryD()?.let{}

is not supported by Kotlin 😳

[jschneider]

probably interpreted as a JS method

[jschneider]

make sense somehow

[Robert Jaros]

You can make very similar effect easily with just simple KVision methods:

vPanel {
	lateinit var div: Div
	button("Toggle div").onClick {
		if (div.visible) div.hideAnim() else div.showAnim()
	}
	div = div {
		+"Lorem ipsum dolor sit amet, consectetur adipiscing elit."
	}
}

[jschneider]

I will give it a try!

[jschneider]

Works well!
Just one difference: Collapse just animates the height. "hideAnim" seems to animate both width and height

[jschneider]

I will try slideDown

[Robert Jaros]

Yep, slide methods should be even better