Simplifying Hide Show Jquery

Question

I've always coded my hide and show jQuery functions in a particular way, but I think that I could write them better.

Below is a filter where I view and hide different images within a portfolio.

HTML

   
            All Projects
            Branding
            Websites
            Digital and Print
            Motion Graphics
            photography

JQUERY

    $(document).ready(function() {
  $("#all").click(function() {
      $("#all").addClass("active");
      $("#branding, #websites, #digital, #motion, #photography").removeClass("active");
    $(".all").show();
  });

  $("#branding").click(function() {
    $(".branding").show();

      $("#branding").addClass("active");
      $("#all, #websites, #digital, #motion, #photography").removeClass("active");
    $(".websites, .digital, .motion, .photography").hide();
  });


  $("#websites").click(function() {
    $(".websites").show();

      $("#websites").addClass("active");
      $("#branding, #all, #digital, #motion, #photography").removeClass("active");
    $(".digital, .branding, .motion, .photography").hide();
  });

  $("#digital").click(function() {
    $(".digital").show();
      
      $("#digital").addClass("active");
      $("#branding, #websites, #all, #motion, #photography").removeClass("active");
    $(".branding, .websites, .motion, .photography").hide();
  });

   $("#motion").click(function() {
    $(".motion").show();
      
      $("#motion").addClass("active");
      $("#branding, #websites, #all, #digital, #photography").removeClass("active");
    $(".branding, .websites, .photography").hide();
   });

    $("#photography").click(function() {
    $(".photography").show();
      
      $("#photography").addClass("active");
      $("#branding, #websites, #all, #digital").removeClass("active");
    $(".branding, .websites").hide();
  });
});

I reference the code from here code https://codepen.io/3be894d6-0f8e-489a-ae28-476df53bc557/pen/QXdjVJ.

user_519413 · Answer

To do what you require you can use common classes to group the elements by behaviour. Then you can add a single event handler to all those elements. Within that event handler you can separate the behaviour by using a data attribute to control the content which should be displayed when the elements are clicked, something like this:

jQuery($ => {
  $('.trigger').on('click', e => {
    e.preventDefault();
    let trigger = e.currentTarget;
    let target = trigger.dataset.target;
    if (target === '#all') {
      $('.trigger').removeClass('active');
      $('.content').add(trigger).addClass('active');
    } else {
      $('.content, .trigger').removeClass('active')
        .filter(target).add(trigger).addClass('active');
    }
  });
});

a.active { color: #C00; }
.content { display: none; }
.content.active { display: block; }



  All Projects
  Branding
  Websites
  Digital and Print
  Motion Graphics
  Photography


Branding
Websites
Digital
Motion
Photography

Simplifying Hide Show Jquery

1 Answers