Collapsible element from Materialize CSS not expanding in Apps Script sidebar HTML

user_10331769 0
Viewed 113

I am working with a good amount of information that is being displayed in the sidebar, but am having trouble with expanding the accordion. The elements are from MaterializeCSS.com

I am using the following to call open the html:

function sideBar2(){
  var sideHtml = HtmlService.createTemplateFromFile('detailed-calculations').evaluate();
  SpreadsheetApp.getUi().showSidebar(sideHtml);
}

And this is the html file I am using:

<html>
  <head>
    <base target="_top">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <link type="text/css" rel="stylesheet" href="css/materialize.min.css"  media="screen,projection">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script>
      function formSubmit(user_input){
        google.script.run.detailedCalc(user_input);
      }
      document.addEventListener('DOMContentLoaded', function() {
        var elems = document.querySelectorAll('.collapsible');
        var instances = M.Collapsible.init(elems, options);
      });
      function clps(){
        $('.collapsible').collapsible();
      }
      </script>
  </head>
  <body>
    <ul class="collapsible">
    <li>
      <div class="collapsible-header"><i class="material-icons">accessibility</i>Person</div>
      <div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
    </li>
    <li>
      <div class="collapsible-header"><i class="material-icons">directions_boat</i>Boat</div>
      <div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
    </li>
    <li>
      <div class="collapsible-header"><i class="material-icons">child_care</i>Baby</div>
      <div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
    </li>
    <li>
      <div class="collapsible-header"><i class="material-icons">attach_money</i>Money</div>
      <div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
    </li>
    </ul>
    <script type="text/javascript" src="js/materialize.min.js"></script>
  </body>
</html>

My cursor changes implying there is a button, but when I click the collapsible body does not expand out. I suspect this might have to do with containers, but I'm not too experienced in html and have not been able to diagnose the problem. I do plan to add additional text, but wanted to see if I could get this working first.

Any help is appreciated!!

google-apps-script css html javascript
2 Answers

Two items - Your materialize js file source link at the bottom shows:

<script type="text/javascript" src="js/materialize.min.js"></script>

Are you storing it with your project or referencing it somewhere local? If not, switch that line to what's recommended on the materializecss website:

<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

Second -

"var instances = M.Collapsible.init(elems, options)"

Options is meant to be a parameter. If you aren't passing options, then you can just use empty curly brackets, like this:

var instances = M.Collapsible.init(elems, {});

Just for clarity sake, here's the HTML Template (with the items that aren't relevant removed):

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <link type="text/css" rel="stylesheet" href="css/materialize.min.css"  media="screen,projection">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script>
      document.addEventListener('DOMContentLoaded', function() {
        var elems = document.querySelectorAll('.collapsible');
        var instances = M.Collapsible.init(elems, {});
      });
      </script>
  </head>
  <body>
    <ul class="collapsible">
    <li>
      <div class="collapsible-header"><i class="material-icons">accessibility</i>Person</div>
      <div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
    </li>
    <li>
      <div class="collapsible-header"><i class="material-icons">directions_boat</i>Boat</div>
      <div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
    </li>
    <li>
      <div class="collapsible-header"><i class="material-icons">child_care</i>Baby</div>
      <div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
    </li>
    <li>
      <div class="collapsible-header"><i class="material-icons">attach_money</i>Money</div>
      <div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
    </li>
    </ul>
    <!-- Compiled and minified JavaScript -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>  
    </body>
</html>
user_96621910

Adding to Laura Dye's answer.

Seems like you are trying to use jquery but I haven't seen jquery referenced above. If you want to use jquery, make sure to reference it before using. See code below for a working jquery approach.

<html>
  <head>
    <base target="_top">

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

    <script>
      $(document).ready(function() {
        $('.collapsible').collapsible();
      })
    </script>
  </head>
  <body>
    <ul class="collapsible">
      <li>
        <div class="collapsible-header"><i class="material-icons">accessibility</i>Person</div>
        <div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
      </li>
      <li>
        <div class="collapsible-header"><i class="material-icons">directions_boat</i>Boat</div>
        <div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
      </li>
      <li>
        <div class="collapsible-header"><i class="material-icons">child_care</i>Baby</div>
        <div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
      </li>
      <li>
        <div class="collapsible-header"><i class="material-icons">attach_money</i>Money</div>
        <div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
      </li>
    </ul>
  </body>
</html>

Notes:

  • Be sure to check the console for errors once trying to do your html. There were a lot of errors showing when trying to debug your code. Although already pointed out by Laura Dye, you can reduce those errors by checking the console.
  • Uncaught ReferenceError: $ is not defined is a hint that points out you haven't referenced jquery.

Sample console showing jquery issue:

output

user_161186860
Related