title: Javascript Component not working of Materialize
body: <p>I want to use Materialize Framework but I am not able to use its JAVASCRIPT Component, the waves-button worked but the rest of all are not working, I searched on Net and found first call jquery before Materialize but that did not solve my problem ..</p>
  
  <p>This is my index.html Page and my init.js is </p>
  
  <pre><code>&lt;html&gt;
      &lt;head&gt;
          &lt;link rel="stylesheet" href="CSS/materialize.min.css"&gt;
          &lt;script src="js/jquery.js"&gt;&lt;/script&gt;
          &lt;script src="js/materialize.js"&gt;&lt;/script&gt;
          &lt;script src="js/init.js"&gt;&lt;/script&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;nav&gt;
              &lt;ul class="right hide-on-med-and-down"&gt;
                  &lt;li&gt;&lt;a href="#!"&gt;First Sidebar Link&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#!"&gt;Second Sidebar Link&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
              &lt;ul id="slide-out" class="side-nav"&gt;
                  &lt;li&gt;&lt;a href="#!"&gt;First Sidebar Link&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#!"&gt;Second Sidebar Link&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
              &lt;a href="#" data-activates="slide-out" class="button-collapse"&gt;&lt;i class="mdi-navigation-menu"&gt;&lt;/i&gt;&lt;/a&gt;
          &lt;/nav&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  
  
  (function ($) {
      $(function () {
  
          // Initialize collapse button
          $(".button-collapse").sideNav();
          // Initialize collapsible (uncomment the line below if you use the dropdown variation)
          //$('.collapsible').collapsible();
          $('.button-collapse').sideNav('show');
  
      }); // end of document ready
  })(jQuery);
  // end of jQuery name space
  </code></pre>
  
  <p>I call  jquery.js first than materialize.js but it is not working.</p>