 <p>To quickly answer your question I will first provide solution.</p> <p>Although this is not best practice, and not helping you learn the right approach to design html structure and traverse the DOM in efficient and quick way, it will solve this specific problem.</p> <p>If it was all designed better, this might not require Javascript at all and CSS would be perfect solution.</p> <p>I do not want to explain How my solution work, so you will have the opportunity to learn from this.</p> <p>I replaced the following tow lines:</p> <pre><code>afterSlideLoad:(function(){ $(".active").parent().css("color", "black"); $(".active").parent().parent().css("color", "black"); }) </code></pre> <p>To this. this is broken to lines, for better understanding. [of-course this works in code too.]):</p> <pre><code> afterLoad: function(){ /* Here comes your previous code... */ console.log('afterSlideLoad Changed to afterLoad'); $('.inlinedColor') .css('color','gray') .removeClass('inlinedColor'); $('li.active') .prevAll('span.year') .first() .add( $('li.active') .parents('li') .find('&gt;a span span') ) .addClass('inlinedColor') .css('color','black'); } </code></pre> <p>All the above available here: <a href="http://jsfiddle.net/rwde78ts/10/" rel="nofollow">http://jsfiddle.net/rwde78ts/10/</a></p> <p>If you did not managed to figure it out on your own, do not hesitate to ask, so i could explain line by line.</p>