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

   <div class="filters">
            <a id="all" class="active"><label>All Projects</label></a>
            <a id="branding"><label>Branding</label></a>
            <a id="websites"><label>Websites</label></a>
            <a id="digital"><label>Digital and Print</label></a>
            <a id="motion"><label>Motion Graphics</label></a>
            <a id="photography"><label>photography</label></a>
        </div>

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.

Answer 1

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; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="filters">
  <a href="#" class="trigger active" data-target="#all"><label>All Projects</label></a>
  <a href="#" class="trigger" data-target="#branding"><label>Branding</label></a>
  <a href="#" class="trigger" data-target="#websites"><label>Websites</label></a>
  <a href="#" class="trigger" data-target="#digital"><label>Digital and Print</label></a>
  <a href="#" class="trigger" data-target="#motion"><label>Motion Graphics</label></a>
  <a href="#" class="trigger" data-target="#photography"><label>Photography</label></a>
</div>

<div class="content active" id="branding">Branding</div>
<div class="content active" id="websites">Websites</div>
<div class="content active" id="digital">Digital</div>
<div class="content active" id="motion">Motion</div>
<div class="content active" id="photography">Photography</div>