Hi Everybody. I have a page that has two pricing lists. The lists are supposed to be visible on large screens, then when viewed on mobile phones, they collapse and expand when clicked. You will see when you go the the link that the javascript is kind of working. It did collapse the divs but it shouldn't do that until the screen size is small. It also isn't making anything clickable. Any suggestions and/or solutions are seriously appreciated. Thank you!
Link:
http://waxstudios.businesscatalyst.c...vicesTest.html
Code:
<script type="text/javascript">
// Variable to detect window width.
var windowWidth = $(window).width();
function expander() {
jQuery(document).ready(function() {
jQuery(".MenuContent").hide();
jQuery(".Menuheading").click(function()
{
jQuery(this).next(".MenuContent").slideToggle(500);
});
});
};
// Wait for the page to load
jQuery(document).ready(function ($) {
// Trigger function for a certain window width
if (windowWidth>768) {
// Load expander.
expander();
}
});
</script>