Use JQuery to show and hide elements based on data attributes.

jquery-refactor-jchaffer.js

// Thanks to Jon Chaffer for the education and refactor!
(function($){
    $(function () {      
      // Jquery docs piecing together
      // Make the clicking work on the element we click
      $('nav a').on('click', function (e) {
        // This stops the link tag from its default behavior
        e.preventDefault();
        // Remove the "selected" class from all the other links
        // @link: https://mycode.blog/navya/jquery-toggle-class-method-active-color
        $('nav a').removeClass('selected');
        // On this element we just clicked, add the class
        $(this).addClass('selected');
        // @link: https://stackoverflow.com/questions/18136822/addclass-where-data-id-equals-data-category
        // Variables so we can find the data attributes
        var theSlug = $(this).data('slug'), $allRow = $('li');
        // Variable to find the target data attribute and match it with the data attribute variables we made
        var $currentRow = $('li[data-category=' + theSlug + ']');
        // Remove the class from previous elements
        $allRow.removeClass('active');
        // If the souce and target attributes match (slug and category), add a class to the element
        $currentRow.addClass('active');
        // I think this explains it.
      });
    });
})(jQuery);

jquery-show-elements-data-attributes.js

<script>
(function($){
  jQuery(document).ready(function($){
    $(function () {      
      // Jquery docs piecing together
      // Make the clicking work on the element we click
      $('nav a').on('click', function (e) {
        // This stops the link tag from its default behavior
        e.preventDefault();
        // If a class exists on the element we just clicked remove it
        // @link: https://mycode.blog/navya/jquery-toggle-class-method-active-color
        $('nav a').removeClass('selected');
        // On this element we just clicked, add the class
        $(this).toggleClass('selected');
        // @link: https://stackoverflow.com/questions/18136822/addclass-where-data-id-equals-data-category
        // Variables so we can find the data attributes
        var theSlug = $(this).data('slug'), $allRow = $('li');
        // Variable to find the target data attribute and match it with the data attribute variables we made
        var $currentRow = $('li[data-category=' + theSlug + ']');
        // If the souce and target attributes match (slug and category), add a class to the element
        $('li[data-category=' + theSlug + ']').addClass('active');
        // Remove the class from previous elements
        $allRow.not($currentRow).removeClass('active');
        // I think this explains it.
      });
    });
  });
})(jQuery);
</script>

Use JQuery to show and hide elements based on data attributes.md

Use Jquery to show and hide elements with data-attributes

I needed to show and hide a list of posts on a page when clicking on links.

<main role="main">
  <nav role="navigation">
    <a href="javascript.void(0);" data-slug="slug-1">Link 1</a>
    <a href="javascript.void(0);" data-slug="slug-2">Link 2</a>
    <a href="javascript.void(0);" data-slug="slug-3">Link 3</a>
  </nav>
  <section>
    <h2>List of items</h2>
    <ul>
      <li data-category="slug-1">Item 1</li>
      <li data-category="slug-2">Item 2</li>
      <li data-category="slug-3">Item 3</li>
    </ul>
  </section>
</main>