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/

yes i have different css style sheets for different resolutions. but java script makes them expand and collapse on click. — user3174196, Nov 03 '15 at 18:34
I think you should check out the resize event, I have posted an answer below with more details — Japheth Ongeri - inkalimeva, Nov 04 '15 at 11:40

score 1 · Accepted Answer · edited May 23 '17 at 10:27

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 questionhere has more details

score 0 · Answer 2 · answered Nov 03 '15 at 18:32

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

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

2 Answers2