Collapse not working when initialised using getElementById

Topic: Collapse not working when initialised using getElementById

Denre priority asked 2 years ago

Expected behavior When creating the collapse function by ID, the block is not hidden when calling the .hidden() function. I expect the block to be hidden

Code used: https://mdbootstrap.com/docs/standard/components/collapse/#docsTabsAPI (section: Methods)

Actual behavior The block is visible

Resources (screenshots, code snippets etc.)

HTML:

<div id="myCollapse">
  blablabla
</div>

const myCollapse = document.getElementById('myCollapse')
const bsCollapse = new mdb.Collapse(myCollapse)
bsCollapse.hide()

Add comment

Denre priority answered 2 years ago

0 0 Best answer

I tried to add .collapse, but as soon as i initialise the block, it becomes visible.

HTML:

<div id="myCollapse" class="collapse">
  blablabla
</div>

JS:

const myCollapse = document.getElementById('myCollapse')
const bsCollapse = new mdb.Collapse(myCollapse)

Dawid Wajszczuk staff commented 2 years ago

If you use collapse class, there is no need of this JS code. It reinitializes collapse component and overwrites its default behavior. Delete JS code and it will work.

Add comment

Dawid Wajszczuk staff answered 2 years ago