MaterializeCSS Open All Collapsible's by Default - materialize

Question

Looking to open all collapsible's on page load then still allow them to be collapsible etc. Is this possible?
$(document).ready(function(){
$('.collapsible').collapsible();
});

Answer 1

This can be done with instance.open().
Don't pass any number in the method and all of your collapsibles will open up.
HTML-
<ul class="collapsible">
<li>
<div class="collapsible-header">
<i class="material-icons">filter_drama</i>First</div>
<div class="collapsible-body">
<span>Lorem ipsum dolor sit amet.</span>
</div>
</li>
<li>
<div class="collapsible-header">
<i class="material-icons">place</i>Second</div>
<div class="collapsible-body">
<span>Lorem ipsum dolor sit amet.</span>
</div>
</li>
<li>
<div class="collapsible-header">
<i class="material-icons">whatshot</i>Third</div>
<div class="collapsible-body">
<span>Lorem ipsum dolor sit amet.</span>
</div>
</li>
</ul>
JS-
document.addEventListener('DOMContentLoaded', function () {
var elems = document.querySelector('.collapsible');
var instances = M.Collapsible.init(elems);
instances.open();
});
Collapsible - MaterializeCSS

Answer 2

For anyone else coming here. (I just found this old post trying to work this out myself).
Actually #Cătălin Rădoi's comment is the correct one:
document.addEventListener('DOMContentLoaded', function() {
// Get all collapsibles
var elems = document.querySelectorAll('.collapsible');
// Initialise them
var instances = M.Collapsible.init(elems);
// Get the specific collapsible - in this case the first(0)
var instance = instances[0];
// Pass the index of the panel you need to open
instance.open(0);
});
Tested and working codepen.
https://materializecss.com/collapsible.html

Answer 3

I had a similar situation recently and would like to summarize the ways to solve the problem.
1. With Javascript only
document.addEventListener('DOMContentLoaded', function() {
// Initialization as presented in the docs
var elems = document.querySelectorAll('.collapsible')
var instances = M.Collapsible.init(elems, {})
// Loop through all instances and open them
for (var i = 0; i < instances.length; i++) {
instances[i].open()
}
})
2. With class active. If expandable type is OK, you can use it and then simply add class="active" to every <li>. Like that:
Javascript
document.addEventListener('DOMContentLoaded', function() {
// Initialization as presented in the docs
var elem = document.querySelector('.collapsible.expandable');
var instance = M.Collapsible.init(elem, {
accordion: false
})
})
HTML
<!-- Add expandable to ul -->
<ul class="collapsible expandable">
<!-- Add active to every li -->
<li class="active">
<div class="collapsible-header">First</div>
<div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
</li>
<li class="active">
<div class="collapsible-header">Second</div>
<div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
</li>
<li class="active">
<div class="collapsible-header">Third</div>
<div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
</li>
</ul>