Why Does The Hover And Click Not Always Work?

here is my fiddle Pretty much working perfectly apart from sometimes mouseenter, mouseleave, click function (.item) doesn't always work - and needs to be clicked for it to start wo

Solution 1:

Try replacing

$('.timelineTile').not(this).removeClass('clicked').find('.pull_down_content').‌​height(0); 

with this

$('.timelineTile').not(this).removeClass('clicked').find('.pull_down_content').‌​height(0).end().find('.item').data('clicked',false); 

Solution 2:

Maybe you try to attach events when elements aren't exists (for example if they will be added dynamically by scripts).

Use more modern case 'on' instead of 'click' etc.

$(wrapper).on('click', 'element', function() { ... });

Smth like:

...
<div class="wrapper">
    <spanclass="link">Click me</span>
</div>
...
$('.wrapper').on('click', '.link', function() { ... });

This variant adds events for all elements even if they added dynamically.