CODEWITHSUNDEEP
javascripthtmlmaterialize
Mask
Mask

Reputation: 573

materialize collapsible not expending on click

Materialize collapsible is not expanding on click. I have initialize it proper even then its not working. here is my html code:

.
.

 <p style="color: #fff; font-family: 'Raleway',sans-serif; font-size: 62px; font-weight: 800; line-height: 72px; margin: 0 0 24px; text-align: center; text-transform: uppercase" id="demo"></p>
  <div class="row"></div>
    <ul class="collapsible popout col s6" id="clap">
    <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>
    </ul>

  <div id="modal1" class="modal">
.
.
.

and this is initialization code

  <script>

  document.addEventListener('DOMContentLoaded', function() {
    checkCurrentUser();
    var elems = document.querySelectorAll('select');
    var instances = M.FormSelect.init(elems);
    var elemss = document.querySelectorAll('.collapsible');
    var instances = M.Collapsible.init(elemss, options);

  });
</script>

In this code I also have select element but its working fine. Only collapsible is not working

Upvotes: 1

Views: 209

Answers (2)

iscream
iscream

Reputation: 790

Remove the options from var instances = M.Collapsible.init(elemss, options);. That is an undefined variable in your case. According to the docs, if you are to add extra functionalities to your component, you may add an object accordingly, that would replace options. So in short terms, option is just a placeholder for that object.

Upvotes: 2

Sean Doherty
Sean Doherty

Reputation: 2378

Take out the undefined options variable:

var instances = M.Collapsible.init(elemss);

The console should always be the first place to look with any problem, if you look in there you'll see 'options is undefined'.

It's a problem with the documentation.

Upvotes: 2

Related Questions