collapse div on small screens, expand on large ones-javascript

Question

How can I make a simple script that will expand/shrink div based on screen size on load and screen resize? I'm new to java script here is my current code. Its a menu that on tablets and phones that is collapsed by default and click-able to expand its contents. But on desktops and laptops it is already expanded by default.

 if ( $(window).width() > 600) { $(function(){ $('.header').click(function(){ $(this).closest('.container').toggleClass('collapsed'); }); }); //container is expanded on large screen resize or load } else { //container is collapsed on load or screen resize or load } 

 .container{ width:300px; background:#ccc; margin:10px; float:left; } .header{ background:url('http://cdn1.iconfinder.com/data/icons/vaga/arrow_up.png') no-repeat; background-position:right 0px; cursor:pointer; } .collapsed .header{ background-image:url('http://cdn2.iconfinder.com/data/icons/vaga/arrow_down.png'); } .content{ height:auto; min-height:100px; overflow:hidden; transition:all 0.3s linear; -webkit-transition:all 0.3s linear; -moz-transition:all 0.3s linear; -ms-transition:all 0.3s linear; -o-transition:all 0.3s linear; } .collapsed .content{ min-height:0px; height:0px; } 

 <div class="container"> <div class="header">Bla blah</div> <div class="content"> <p> Some content here </p> </div> </div> 

http://jsfiddle.net/AMzfe/1002/

Answer 1

You can achieve that by using the jquery resize event that is fired when the window is resized. Just add code that listens for the resize event, measures the new window size then collapses or expands the divs depending on the new size of the window.

var setDivsState=function(){
    if ( $(window).width() < 600) {
        $(function(){
            $('.header').click(function(){
                $(this).closest('.container').addClass('collapsed');
            });
        });
        //container is expanded on large screen resize or load
    }
    else {
        $(function(){
            $('.header').click(function(){
                $(this).closest('.container').removeClass('collapsed');
            });
        });
        //container is collapsed on load or screen resize
    }
}
$(window).resize(setDivsState); 

You should also call the setDivsState function when the window first loads.

There is more documentation on the resize event here jquery docs and this stackoverflow question here has more details

Answer 2

You can build upon the parameter you have already specified by using the JavaScript setInterval() function. Simply wrap your code inside the setInterval() variable and have it loop through every 100 milliseconds.

var widthDetect= setInterval(function(){    
if ( $(window).width() > 600) {     
        $(function(){
  $('.header').click(function(){
    $(this).closest('.container').toggleClass('collapsed');
  });
});
 //container is expanded on large screen resize or load
}
else {
//container is collapsed on load or screen resize or load
}
}, 100);