CODEWITHSUNDEEP
javascriptjquery
TDG
TDG

Reputation: 1302

Detect based on screen resize (instead of page refresh)

Used below HTML for container.

  1. If screen size greater than 768... two column layout
  2. If screen size lesser than 767... Accordion effect.

By below JS code works fine if we kept screen lesser than 767 and refresh the page. But, i need a solution to work based on screen resize from big screen to smaller screen.

Please let me know solution.

Thanks

HTML:

<div class="row" id="accordion">
    <div class="col-sm-12 col-md-6 col-lg-3">
      <h6 class="accordion-toggle">Frequently Ask Questions</h6>
      <ul class="accordion-content default">
        <li> <a href="">Carry with me?</a></li>
        <li> <a href="">Destination country?</a></li>
      </ul>
    </div>
    <div class="col-sm-12 col-md-6 col-lg-3">
      <h6 class="accordion-toggle">Corporate Info</h6>
      <ul class="accordion-content">
        <li> <a href="">Careers</a></li>
        <li> <a href="">Press Room</a></li>
      </ul>
    </div>
 </div>

JS:

if ($(window).width() < 767) {
    $('#accordion').find('.accordion-toggle').click(function () {
        //Expand or collapse this panel
        $(this).next().slideToggle('fast');
        //Hide the other panels
        $('.accordion-content').not($(this).next()).slideUp('fast');
    });
}

Upvotes: 0

Views: 514

Answers (3)

serdar.sanri
serdar.sanri

Reputation: 2228

You need to put your code inside a window.resize event like @karthnik VU said

Updated 

$('#accordion.small').on('click', '.accordion-toggle', function() {
  //Expand or collapse this panel
  $(this).next().slideToggle('fast');
  //Hide the other panels
  $('.accordion-content').not($(this).next()).slideUp('fast');
});

function resizer(){ 
    $('#accordion').toggleClass('small' , $(window).width() < 767);
    if ($(window).width() >= 767) { 
      $("#accordion").find('.accordion-content').show();
    }
}

$(window).on('resize', resizer).resize();

Upvotes: 1

edi
edi

Reputation: 937

You need a resize listener and need to detect when the user changes from big to small and from small to big screen. I didn't test my code but it might look like this:

var lastWindowWidth;
$(document).ready(function() {
    $(window).resize(function() {
      var $window = $(this),
          windowWidth = $window.width();

      if (windowWidth < 767 && lastWindowWidth>=768) {

        //accordionify

      } else if (windowWidth >= 768 && lastWindowWidth < 767) {

        //remove accordion
      }

      lastWindowWidth = windowWidth;
    });
});

But I think you could achieve this behavior also using plain css (bootstrap helper classes)

Upvotes: 0

ramongr
ramongr

Reputation: 55

If I understood correctly almost all of that could be achieved with css.Apparently you're using bootstrap so you could use some visibility classes to show/hide on certain window sizes. Also, you can check the navbar example of having different looks for different screen sizes. Just resize the page to see. Hope this helps

Upvotes: 0

Related Questions