Collapse not working when initialised using getElementById


Topic: Collapse not working when initialised using getElementById

Denre pro premium priority asked 4 months 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>

JS

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

Dawid Wajszczuk staff answered 4 months ago

Hi,

You need to set timeout for hide function and it will work. Here is the snippet https://mdbootstrap.com/snippets/standard/d-wajszczuk/3712162#js-tab-view. But probably the better solution is to just use collapse class which will hide this block by default https://mdbootstrap.com/snippets/standard/d-wajszczuk/3712179.

Keep coding,
Dawid


Denre pro premium priority answered 4 months ago

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 4 months 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.


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue
  • User: Pro
  • Premium support: Yes
  • Technology: MDB Standard
  • MDB Version: MDB5 3.10.1
  • Device: laptop
  • Browser: Firefox
  • OS: W10
  • Provided sample code: No
  • Provided link: Yes