Responsive Jquery toggle command

Question

I am having an issue with my code. Whenever, I load up the page in the browser or in a mobile device, and I try to toggle it suddenly toggles multiple times when I just clicked on it once. I am trying to use this syntax code to make it responsive.

My CodePen

$(window).resize(function() {
  $(".textcontent").hide();

  if ($(window).width() <= 480) {

    jQuery(function($) {
      $(document).ready(function() {
        $(".textcontent").hide();
        $(".titleheader").click(function() {
          $(this).toggleClass("active").next().slideToggle("fast");
          return false;
        });
      });
    }); 

  }
});

Answer 1

The text toggles more than once because you are binding the click handler each time the resize event fires. Each bind attaches another handler so, depending on how many times the resize event fires, you might end up with many click handlers firing at once.

I suggest that you bind or unbind your click handler depending on the screen width, like so:

$(function() {

  // function to toggle a text section

  function toggleText(elm) {
    $(elm).toggleClass("active").next().slideToggle("fast");
  }

  // resize event handler

  $(window).on('resize', function() {

    if ($(window).width() <= 480) {

      // if window <= 480, unbind and rebind click handlers, and hide all text content

      $(".titleheader").off('click').on('click', function() {
        toggleText(this);
      });

      $(".textcontent").hide();

    } else {

      // if the window > 480, unbind click handlers and hide all text

      $(".titleheader").off('click');
      $(".textcontent").show();

    }

  }).trigger('resize'); // initialize - trigger the resize once upon load

});

WORKING EXAMPLE

You might also want to throttle or "debounce" your resize handler so it won't fire continuously in IE, Safari, and Chrome.

---

EDIT:

An alternate method is to set a flag to indicate whether the layout is "small" or "large". Then, only change the layout if the flag does not indicate the desired layout:

$(function() {

  // layout flag (defaults to "not small")
  var small = false;

  // function to toggle a text section
  function toggleText(elm) {
    $(elm).toggleClass("active").next().slideToggle("fast");
  }

  // resize event handler
  $(window).on('resize', function() {


    if ($(window).width() <= 480) {

      // if window <= 480 and the layout is "not small", bind click handlers and hide all text content

      if (!small) {

        console.log('made small');
        $(".titleheader").on('click', function() {
          toggleText(this);
        });
        $(".textcontent").hide();

        // set the layout flag to "small"
        small = true;

      }

    } else {

      // if the window > 480 and the layout is "small", unbind click handlers and hide all text

      if (small) {

        console.log('made large');
        $(".titleheader").off('click');
        $(".textcontent").show();

        // set the layout flag to "not small"
        small = false;
      }

    }

  }).trigger('resize'); // initialize - trigger the resize once upon load

});

WORKING EXAMPLE