Understanding jQuery legacy code – Learning by example(part 2)

1. Make a tab navigation

$('#tabs li').click(ev => {
  const index = $('#tabs li').index(ev.target);
  $('#tab-content')
   .find('div:visible')
   .slideUp()
   .end()
   .find('div')
   .eq(index)
   .slideDown();
});  

First we created a click event with the ev argument(represents the click event). Then we took the index of the clicked item(ev.target) in the list of #tabs. In the #tab-content we searched for div elements that are not hidden and applied a slide up effect that eventually hides the element. The end() method actually steps back one step in your activity history(dom traversing history) and from div:visible selector you actually go back to #tab-content selector. From there we search again for all divs in the #tab-content select the one equal(eq() method) to the index that we stored in the index constant and make that div visible with slide down effect.

The only problem with this approach is that the slide up of previous tab content and slide down of the new selected tab content is happening in the same time. So we have to options. The first one is to add a different transition duration on slideUp()

.slideUp(0)

This will happen instantly, you could also use hide(0) or just .css(‘display’,’none’)

The other option is to wait till slide up is finished and only than initiate a slide down for the clicked item.

$('#tab-content > div:first').show(0);
$('#tabs li').click(ev =>{
  const index = $('#tabs li').index(ev.target);
  $('#tab-content')
    .find('div:visible')
    .slideUp('normal', () => {
       $('#tab-content div').eq(index).slideDown();
    });  
});  

2. Make an accordion that closes all other opened accordion items when a new one is opened. Also toggle class for opened items.

$('#faq dt').click(ev => {
  $(ev.target)
    .toggleClass('expanded')
    .next('dd')
    .slideToggle()
    .siblings('dd:visible')
    .slideUp()
    .prev()
    .removeClass('expanded')
});

What a nice view of chaining methods in jQuery. We did not use $(this) and instead we used $(ev.target) because the arrow function does not hold a this scope. toggleClass just switches the expanded class name from expanded to nothing and nothing to expanded. The next() and prev() methods get the next/previous element and siblings() get’s all same level elements with same parent element. The slideUp() and slideToggle() are just slide effects up and the other one is up or down depending if the element is visible or hidden. The removeClass() method removes that expanded class from the element.

3. Add bottom border starting from first navigation item till the hovered item

$('#nav li')
  .mouseenter(ev => {
       $(ev.target)
          .prevAll()
          .addBack()
          .addClass('bordered');
  })
  .mouseleave(ev => {
      $('#nav .bordered').removeClass('bordered')
  })

I used the prevAll() method to get all previous siblings and add a .bordered class name. The addBack() method (andSelf() formerly) adds also the current element in the selector stack. On mouse leave I removed all .bordered classes from the #nav children elements.

0