javascript - Materialize Collapsible Nav Not Working -


i'm not entirely sure why collapsible dropdown menus not working. have imported materialize , jquery , both working collapsible menu nothing when clicked.

<!doctype html>  <html>  <head>      <meta charset="utf-8">      <meta http-equiv="x-ua-compatible" content="ie=edge">      <meta name="viewport" content="width=device-width, initial-scale=1">      <title>create</title>      <!-- fonts -->      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>      <link href="https://fonts.googleapis.com/css?family=raleway:100,600" rel="stylesheet" type="text/css">      <link rel="stylesheet" type="text/css" href="css/materialize.css">      <script src="js/materialize.js" type="text/javascript"></script>      <link href="https://fonts.googleapis.com/icon?family=material+icons" rel="stylesheet">      <!-- styles -->      <style>          .panel {          height: 100vh;          }      </style>  </head>  <body>      <div class="row">          <div class="col m10 panel cyan">          </div>          <div class="col m2 panel">              <ul class="collapsible" data-collapsible="expandable">                  <li>                      <div class="collapsible-header"><i class="material-icons">extension</i>objects</div>                      <div class="collapsible-body"><span>lorem ipsum dolor sit amet, consectetur adipiscing elit, sed eiusmod tempor incididunt ut labore et dolore magna aliqua. ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. lorem ipsum dolor sit amet, consectetur adipiscing elit, sed eiusmod tempor incididunt ut labore et dolore magna aliqua. ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. lorem ipsum dolor sit amet, consectetur adipiscing elit, sed eiusmod tempor incididunt ut labore et dolore magna aliqua. ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</span></div>                  </li>                  <li>                      <div class="collapsible-header"><i class="material-icons">color_lens</i>colors</div>                      <div class="collapsible-body"><span>lorem ipsum dolor sit amet, consectetur adipiscing elit, sed eiusmod tempor incididunt ut labore et dolore magna aliqua. ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</span></div>                  </li>                  <li>                      <div class="collapsible-header"><i class="material-icons">create</i>create</div>                      <div class="collapsible-body"><span>lorem ipsum dolor sit amet, consectetur adipiscing elit, sed eiusmod tempor incididunt ut labore et dolore magna aliqua. ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</span></div>                  <li>                      <div class="collapsible-header"><i class="material-icons">collections</i>backdrops</div>                      <div class="collapsible-body"><span>lorem ipsum dolor sit amet, consectetur adipiscing elit, sed eiusmod tempor incididunt ut labore et dolore magna aliqua. ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</span></div>                  </li>              </ul>          </div>      </div>  </body>  </html>

add in bottom before :

  $(document).ready(function(){     $('.collapsible').collapsible();   }); 

(the collapsible feature relies on initialization jquery)


Comments

Popular posts from this blog

php - Vagrant up error - Uncaught Reflection Exception: Class DOMDocument does not exist -

vue.js - Create hooks for automated testing -

Add new key value to json node in java -