Hi everybody. I have an html page that contains two pricing lists. I would like the two divs containing the pricing lists to hide and on click, expand when viewing on a mobile phone. The code is half working. It's showing up for all screen sizes instead of targeted and the click to expand feature is not working. I am a javascript newbie so I have no idea how bad my code actually is. Any suggestions or solutions are seriously appreciated. Thank you for reading..

Here is the link to the page: http://waxstudios.businesscatalyst.c...vicesTest.html

You will immediately see that the lists are not showing, so the script is working...kind of. It's supposed to be showing the lists at this size and you can not click to expand. Drag the browser window to simulate small screen and you will see the css change the appearance. This is where they are supposed to collapse and be clickable.

Here is my javascript:

<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>