List menu that shows and hides related content.

relatedContent.js

/**
  * Show the related content of an element. Just add `relation-list` to your `ul` that contains
  * the elements that you will click. For all the elements related to the list items, just
  * add class 'related-content'.
  *
  * (eg.)
  * <ul class="content-list relation-list">
  *   <li></li>
  *   ....
  * </ul>
  *
  * <div class="content-descriptions">
  *   <div class="related-content">....</div>
  *   <div class="related-content">....</div>
  *   <div class="related-content">....</div>
  *   ...
  * </div>
  *
  * @param  {DOM El} el      [element of the item that was selected]
  * @param  {String} attr    [name of the data attribute that we want to find]
  * @param  {String} context [selector string of the context to search for the list items
  *                           and their related content. This allows us to use this pattern
  *                           in any context.]
  */
module.exports = function showRelatedContent(el, attr, context) {
  var $el = $(el),
      $context = $(context),
      $listItems = $('.relation-list li', $context),
      $relatedContent = $('.related-content', $context),
      value = $el.attr('data-'+attr);

  $listItems.removeClass('selected');
  $relatedContent.removeClass('show');
  $el.addClass('selected');
  $relatedContent.filter('[data-'+ attr +'="' + value +'"]').addClass('show');
};