Myujth

I have a little problem with a simple jQuery script (I'm not an expert):

My requirements:

1) I have multiple elements that are made of
- a title
- a body

2) For a screen size > 768px, all the elements are visibile

3) For a screen size =< 768px I want to emulate the Bootstrap Collapse behavior, so when you click on the title, the "body" of the element, i.e. <div class="panel--collapsible" id="panel1"> becomes visible. The body of the element is not visible at the beginning by default.

I post here the code I wrote so far

$(document).ready(function() 
 toggleDivOnMobile();
 window.addEventListener('resize', function() 

 toggleDivOnMobile();
 );

);

function toggleDivOnMobile() 
 $('.par-title--collapsible').click(function(e) 
 e.preventDefault();
 var currentAttrValue = $(this).attr('href');
 var content = $(currentAttrValue);
 if (window.outerWidth <= 768) 
 content.slideToggle("slow"); 
 
 );
 return false;

.panel--collapsible 
 display: none;


@media screen and (min-width:769px) 
 .panel--collapsible 
 display: block!important;
 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="par1" class="collapsible">
 <h2><a href="#panel1" class="par-title--collapsible">Title 1</a></h2>
 <div class="panel--collapsible" id="panel1">
 <p>Lorem ipsum dolor sit amet</p>
 </div>
</div>

<div id="par2" class="collapsible">
 <h2><a href="#panel2" class="par-title--collapsible">Title 2</a></h2>
 <div class="panel--collapsible" id="panel2">
 <p>Cuius et cetera</p>
 </div>
</div>

My problem is: after resizing the window, the collapse works, but it "bounces" multiple times.

You can simulate the behavior by resizing the window.

Thank you for your help;of course if you need more information, write me a comment :)

The problem is you're calling toggleDivOnMobile, which gets called at each window resize. By attaching your event handlers inside of that function, you end up getting multiple event handlers all trying to do the same thing, and they start fighting with each other.

The solution would be to set some external variable and only attach your event listeners once, like so:

var isMobile = false;

$(document).ready(function() 
 toggleDivOnMobile();
 handleWindowResize();

 window.addEventListener('resize', function() 
 handleWindowResize();
 );
);

function handleWindowResize() 
 isMobile = window.outerWidth <= 768;


function toggleDivOnMobile() 
 $('.par-title--collapsible').click(function(e) 
 e.preventDefault();
 var currentAttrValue = $(this).attr('href');
 var content = $(currentAttrValue);
 if (isMobile) 
 content.slideToggle("slow"); 
 
 );
 return false;

There are many other ways you can accomplish this, but that's a start. You can also look into the jQuery .off function if you wanted to dynamically add and remove event listeners based on the window size, but I wouldn't recommend that.

EDIT

You may also want to place the isMobile check in an external function, and call it on page load; a mobile browser (or any browser, really) won't trigger a resize event unless the browser is actually resized.

EDIT 2

Updated code per OP request to include onload resize call.