Search code examples
javascriptcsstabsmaterializeexpandable

How to get a Materialize expandable to work within a tab?

I have several materialize tabs, where each tab will have a different collapsible expandable lists (used as a sidebar).

The tabs work correctly, and the expandable works correctly on the first tab; however, the expandable does not work on any other tab. It simply works as an accordion, and does not call the onOpenStart function within the collapsible.

Here is a simplified example of what I have:

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Using cdn for testing purposes -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/css/materialize.min.css">
  </head>
  <body>

    <div class="container">
      <div class="row">
        <div class="col s12">
          <ul class="tabs">
            <li class="tab col s3"><a href="#tab1">Tab 1</a></li>
            <li class="tab col s3"><a class="" href="#tab2">Tab 2</a></li>
          </ul>
        </div>

        <!-- This Exandable works! -->
        <div id="tab1" class="col s3">
          <ul class="collapsible expandable">
            <li>
              <div class="collapsible-header">First</div>
              <div class="collapsible-body">Body content</div>
            </li>
            <li>
              <div class="collapsible-header">Second</div>
              <div class="collapsible-body">Body content</div>
            </li>
          </ul>
        </div>

        <!-- This Expandable does not work (just accordion) -->
        <div id="tab2" class="col s3 offset-s3">
          <ul class="collapsible expandable">
            <li>
              <div class="collapsible-header">First</div>
              <div class="collapsible-body">Body content</div>
            </li>
            <li>
              <div class="collapsible-header">Second</div>
              <div class="collapsible-body">Body content</div>
            </li>
          </ul>
        </div>
      </div>
    </div>

    <!-- cdn for testing purposes -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/js/materialize.min.js"></script>
    <script>
    M.AutoInit();

    document.addEventListener('DOMContentLoaded', function() {
      let el = document.querySelector('.tabs');
      let instance = M.Tabs.init(el, {});
    });

    document.addEventListener('DOMContentLoaded', function() {
      let elem = document.querySelector('.collapsible.expandable');
      let instance = M.Collapsible.init(elem, {
        accordion: false,
        onOpenStart: function(){console.log('collasible Open Start')}
      });
    });
    </script>
  </body>
</html>

Could someone help point out what I'm missing?

Thanks!

Solution

  • Your error is in this line:

    let elem = document.querySelector('.collapsible.expandable');

    You need to use querySelectorAll in order to init both the collapsible elements.

    The snippet:

    document.addEventListener('DOMContentLoaded', function() {
    M.AutoInit();

    let el = document.querySelector('.tabs');
    let instance = M.Tabs.init(el, {});


    let elem = document.querySelectorAll('.collapsible.expandable');
    let instanceCollapsible = M.Collapsible.init(elem, {
           accordion: false,
           onOpenStart: function(){
              //console.log('collasible Open Start');
        }
    });
});
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/css/materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/js/materialize.min.js"></script>


<div class="container">
    <div class="row">
        <div class="col s12">
            <ul class="tabs">
                <li class="tab col s3"><a href="#tab1">Tab 1</a></li>
                <li class="tab col s3"><a class="" href="#tab2">Tab 2</a></li>
            </ul>
        </div>

        <div id="tab1" class="col s3">
            <ul class="collapsible expandable">
                <li>
                    <div class="collapsible-header">First</div>
                    <div class="collapsible-body">Body content</div>
                </li>
                <li>
                    <div class="collapsible-header">Second</div>
                    <div class="collapsible-body">Body content</div>
                </li>
            </ul>
        </div>

        <div id="tab2" class="col s3 offset-s3">
            <ul class="collapsible expandable">
                <li>
                    <div class="collapsible-header">First</div>
                    <div class="collapsible-body">Body content</div>
                </li>
                <li>
                    <div class="collapsible-header">Second</div>
                    <div class="collapsible-body">Body content</div>
                </li>
            </ul>
        </div>
    </div>
</div>