Topic: Collapse not working when initialised using getElementById
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.)
<div id="myCollapse"> blablabla </div>
const myCollapse = document.getElementById('myCollapse') const bsCollapse = new mdb.Collapse(myCollapse) bsCollapse.hide()
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.
I tried to add .collapse, but as soon as i initialise the block, it becomes visible.
<div id="myCollapse" class="collapse"> blablabla </div>
const myCollapse = document.getElementById('myCollapse') const bsCollapse = new mdb.Collapse(myCollapse)
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
- 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