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 ..
This is my index.html Page and my init.js is
<html>
<head>
<link rel="stylesheet" href="CSS/materialize.min.css">
<script src="js/jquery.js"></script>
<script src="js/materialize.js"></script>
<script src="js/init.js"></script>
</head>
<body>
<nav>
<ul class="right hide-on-med-and-down">
<li><a href="#!">First Sidebar Link</a></li>
<li><a href="#!">Second Sidebar Link</a></li>
</ul>
<ul id="slide-out" class="side-nav">
<li><a href="#!">First Sidebar Link</a></li>
<li><a href="#!">Second Sidebar Link</a></li>
</ul>
<a href="#" data-activates="slide-out" class="button-collapse"><i class="mdi-navigation-menu"></i></a>
</nav>
</body>
</html>
(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
I call jquery.js first than materialize.js but it is not working.
The code you sent is working :
(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
https://jsfiddle.net/jzob32ed/
So which jquery version are you using ? materialize ? Any other framework that conflicts with jquery ? Can you dump in your question the console output.