Code Sample

code-sample.js

import { isTouchDevice } from './detect-touch-device';

const $win = $(window);
const $doc = $(document);
const $navDropdownParent = $('.nav .has-dropdown');

/**
 * Show nav dropdowns for mobile devices
 * @param  { Object } $clickedElement DOM Element - clicked element
 * @return { Void }
 */
function showNavDropdownsForMobile(clickedElement) {
  var expanded = $(clickedElement).find('span').attr('aria-expanded');
  if(expanded == "true") {
    $(clickedElement).find('span').attr('aria-expanded', false);
    $(clickedElement)
      .removeClass('is-active')
      .next('.nav__dropdown')
      .slideUp()
  } else {
    $(clickedElement)
      .closest('li')
      .siblings()
      .find('span')
      .attr('aria-expanded', false);

    $(clickedElement).find('span').attr('aria-expanded', true);

    $(clickedElement)
      .addClass('is-active')
      .next('.nav__dropdown')
      .slideDown()
      .closest('li')
      .siblings()
      .find('.is-active')
      .removeClass('is-active')
      .next('.nav__dropdown')
      .slideUp();

    $(clickedElement)
      .closest('.nav__dropdown-col')
      .siblings()
      .find('.is-active')
      .removeClass('is-active')
      .next('.nav__dropdown')
      .slideUp();
  }
}

/**
 * Hide nav dropdowns for mobile devices
 * @param  { Object } event Event on page
 * @return { Void }
 */
function hideNavDropdownsForMobile(event) {
  const $element = $(event.target);

  if (!$element.parents().hasClass('nav')) {
      $navDropdownParent.find('.nav__dropdown[style="display: block;"]').slideUp();
      $navDropdownParent
        .removeClass('is-active')
        .find('.is-active')
        .removeClass('is-active');
  }
}