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.)
HTML:
<div id="myCollapse">
blablabla
</div>
JS
const myCollapse = document.getElementById('myCollapse')
const bsCollapse = new mdb.Collapse(myCollapse)
bsCollapse.hide()
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
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 3 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.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- 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