javascript - Responsive Jquery toggle command -

javascript - Responsive Jquery toggle command -

i having issue code. whenever, load page in browser or in mobile device, , seek toggle toggles multiple times when clicked on once. trying utilize syntax code create responsive.

my codepen

class="lang-js prettyprint-override">$(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"); homecoming false; }); }); }); } });

the text toggles more 1 time because binding click handler each time resize event fires. each bind attaches handler so, depending on how many times resize event fires, might end many click handlers firing @ once.

i suggest bind or unbind click handler depending on screen width, so:

class="lang-js prettyprint-override">$(function() { // function toggle 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 , rebind click handlers, , hide text content $(".titleheader").off('click').on('click', function() { toggletext(this); }); $(".textcontent").hide(); } else { // if window > 480, unbind click handlers , hide text $(".titleheader").off('click'); $(".textcontent").show(); } }).trigger('resize'); // initialize - trigger resize 1 time upon load });

working example

you might want throttle or "debounce" resize handler won't fire continuously in ie, safari, , chrome.

edit:

an alternate method set flag indicate whether layout "small" or "large". then, alter layout if flag not indicate desired layout:

$(function() { // layout flag (defaults "not small") var little = false; // function toggle 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 , layout "not small", bind click handlers , hide text content if (!small) { console.log('made small'); $(".titleheader").on('click', function() { toggletext(this); }); $(".textcontent").hide(); // set layout flag "small" little = true; } } else { // if window > 480 , layout "small", unbind click handlers , hide text if (small) { console.log('made large'); $(".titleheader").off('click'); $(".textcontent").show(); // set layout flag "not small" little = false; } } }).trigger('resize'); // initialize - trigger resize 1 time upon load });

working example

javascript jquery responsive-design