View Single Post
Old 11-08-2012, 04:36 PM   PM User | #1
LaurelRose
New to the CF scene

 
Join Date: Nov 2012
Posts: 6
Thanks: 4
Thanked 0 Times in 0 Posts
LaurelRose is an unknown quantity at this point
Javascript to run only on small screens

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>
LaurelRose is offline   Reply With Quote