I'm attempting to create an animation where a drop-down menu div expands from 0 to 250px in height when the menu button is clicked. I have been using jQuery for this purpose.
Here is the relevant section of my HTML code:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<script src="scripts.js"></script>
The menu button itself is represented by a span element:
<span id="menu_btn" name="menu_button">MENU</span>
Below is the code snippet defining the drop-down menu structure:
<div id="menu_dropdown">
<ul>
<li><a id="on" href="#">HOME</a></li>
<!-- additional menu items -->
</div>
Lastly, here is the jQuery code employed for handling the click event and initiating the desired animation:
$("#menu_btn").toggle(function(){
$("#menu_dropdown").animate({'height': '250px'}, 100);
}, function(){
$("#menu_dropdown").animate({'height': '0px'}, 100);
});
Despite following this approach, the expected functionality fails to materialize. What could be causing this issue?