Topic: JS -> SideNav: sideNav not recognized
Genesys SEO Marketing pro asked 6 years ago
Hi,My company just bought the Pro version and, as a 1st step, we try to see how the Javascript -> SideNav can be customized.
When following the provided tutorial (https://mdbootstrap.com/javascript/sidenav/) we get a consistent error:
index.html:23 Uncaught TypeError: $(...).sideNav is not a function
at index.html:2
Testing Environment:
==================
Browser: Chrome
Code (stripped)
------------------------
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/mdb.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<script type="text/javascript" src="js/jquery-3.2.1.min.js" ></script>
<script type="text/javascript" src="js/popper.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript\" src="js/mdb.min.js"></script>
<script>
// Initialize collapse button
$(".button-collapse").sideNav();
// Initialize collapsible (uncomment the line below if you use the dropdown variation)
$('.collapsible').collapsible();
// SideNav Options
$('.button-collapse').sideNav({
edge: 'right', // Choose the horizontal origin
closeOnClick: true // Closes side-nav on <a> clicks, useful for Angular/Meteor
});
// Show sideNav
$('.button-collapse').sideNav('show');
// Hide sideNav
$('.button-collapse').sideNav('hide');
</script>
Add comment
Mikołaj Smoleński staff answered 6 years ago
You should initialize sideNav only once. Are You sure that You have good paths do js files?
Do You have also html for sideNav?
Regards
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Status
Resolved
Specification of the issue
- ForumUser: Pro
- Premium support: No
- Technology: MDB jQuery
- MDB Version: -
- Device: -
- Browser: -
- OS: -
- Provided sample code: No
- Provided link: Yes
Tags