Hi there,
I have a sticky footer menu that I am trying to get to slide up when the user clicks it.
This is the code I have, but when I test it, it doesn’t slide up and I get an error.
footer.bottom-menu {
width: 100%;
position: fixed;
bottom: 0;
z-index: 1000;
left: 0;
}
#footer-content-menu {
display: none;
}
#footer-left {
width: 20%;
height: 145px;
float: left;
background-color: #5C4033;
opacity: 0.8;
} #footer-left h3 a {
color: #B2816E;
text-transform: lowercase;
}
#footer-right {
width: 80%;
height: 145px;
float: right;
background-color: #B29F63;
opacity: 0.8;
}
.toggle-footer-menu {
width: 100px;
margin: 0 auto;
padding: 10px;
cursor: pointer;
text-align: center;
background-color: #B29F63;
opacity: 0.8;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
<footer class="bottom-menu">
<div class="toggle-footer-menu">menu</div>
<div id="footer-content-menu">
<div id="footer-right">
<ul class="lv">
<li><a href="?page=home" id="home">link</a></li>
<li><a href="?page=about" id="about">link</a></li>
<li><a href="?page=project" id="project">link</a></li>
<li><a href="?page=contact" id="contact">link</a></li>
</ul>
</div>
<div id="footer-left">
<h3><a href="?page=home">link</a></h3>
</div>
</div>
</footer>
<script>
jQuery(document).ready(function(){
jQuery(".toggle-footer-menu").click(function(){
jQuery("#footer-content-menu").slideToggle("slow");
});
});
</script>
This is the error I am getting:
index.html:508 Uncaught TypeError: jQuery(…).slideToggle is not a function
at HTMLDivElement. (index.html:508)
at HTMLDivElement.dispatch (jquery-3.4.1.slim.min.js:2)
at HTMLDivElement.v.handle (jquery-3.4.1.slim.min.js:2)
Does anyone know why this is happening? I’ve tried changing $
to jQuery
but that didn’t work