JavaScript Elegant way of avoiding writing so many (click hide show)

im looking for the elegant way to avoid writing so much code to perform onclick, show clicked, hide others.

here's the code im using:

html:

<p align="center" style="font-size: 22px;">
  <span class="badge badge-secondary" id="yesterday"><a target='_blank' href="#" style="color: inherit;">Yesterday</a></span>
  <span class="badge badge-dark" id="today"><a target='_blank' href="#" style="color: inherit;">Today</a></span>
  <span class="badge badge-secondary" id="tomorrow"><a target='_blank' href="#" style="color: inherit;">Tomorrow</a></span>
</p>

jquery:

  $('#yesterday').click(function(e) {
    e.preventDefault();
    $(this).addClass('badge-dark').removeClass('badge-secondary');
    $('#today,#tomorrow').addClass('badge-secondary').removeClass('badge-dark');
    $('.yesterday').slideDown('slow');
    $('.today,.tomorrow').slideUp('1000');
  });
  $('#today').click(function(e) {
    e.preventDefault();
    $(this).addClass('badge-dark').removeClass('badge-secondary');
    $('#yesterday,#tomorrow').addClass('badge-secondary').removeClass('badge-dark');
    $('.today').slideDown('slow');
    $('.yesterday,.tomorrow').slideUp('1000');
  });
  $('#tomorrow').click(function(e) {
    e.preventDefault();
    $(this).addClass('badge-dark').removeClass('badge-secondary');
    $('#yesterday,#today').addClass('badge-secondary').removeClass('badge-dark');
    $('.tomorrow').slideDown('slow');
    $('.yesterday,.today').slideUp('1000');
  });

To do this:

1. Use a class on those three elements (say, show-hide)
2. Use a class on the .yesterday, .today, and .tomorrow elements as well (say, slide-target).
3. Use a single click handler on the class
4. Within the handler, this is the element you want to show, and its siblings (see siblings) are the ones you want to hide
5. Within the handler, $('.slide-target') is all the targets, then you can use .filter('.' + this.id) to only target the one for this element, and .not('.' + this.id) to target the others

So roughly speaking:

<p align="center" style="font-size: 22px;">
  <span class="show-hide badge badge-secondary"><a target='_blank' href="#" style="color: inherit;">Yesterday</a></span>
  <span class="show-hide badge badge-dark"><a target='_blank' href="#" style="color: inherit;">Today</a></span>
  <span class="show-hide badge badge-secondary"><a target='_blank' href="#" style="color: inherit;">Tomorrow</a></span>
</p>

and

$('.show-hide').click(function(e) {
  e.preventDefault();
  // Just to avoid doing it repeatedly
  var $this = $(this);
  // Add this class
  $this.addClass('badge-dark').removeClass('badge-secondary');
  // Remove it from siblings
  $this.siblings().addClass('badge-secondary').removeClass('badge-dark');
  // Find the target elements
  $('.slide-target')
    .filter('.' + this.id).slideDown('1000').end() // Slide down related
    .not('.' + this.id).slideUp('1000')            // Slide up others
  // Slide down the relevant element(s)
});

A simple extraction of common logic to separate function:

function updateClasses(element, selector) {
    element.addClass('badge-dark').removeClass('badge-secondary');
    $(selector).addClass('badge-secondary').removeClass('badge-dark').slideUp('1000');
}

$('#yesterday').click(function (e) {
    e.preventDefault();
    updateClasses(this, '#today,#tomorrow');
    $('.yesterday').slideDown('slow');
});
$('#today').click(function (e) {
    e.preventDefault();
    updateClasses(this, '#yesterday,#tomorrow');
    $('.today').slideDown('slow');
});
$('#tomorrow').click(function (e) {
    e.preventDefault();
    updateClasses(this, '#yesterday,#today');
    $('.tomorrow').slideDown('slow');
});

Something like this:

$('#yesterday, #today, #tommorow').click(function(e) {

      e.preventDefault(); 
      $(this).addClass('badge-dark').removeClass('badge-secondary');

      if ( $(this).is("#yesterday") ) {

        $('#today,#tomorrow').addClass('badge-secondary').removeClass('badge-dark');
        $('.yesterday').slideDown('slow');
        $('.today,.tomorrow').slideUp('1000');

      } else if ( $(this).is("#today") ) {

        $('#yesterday,#tomorrow').addClass('badge-secondary').removeClass('badge-dark');
        $('.today').slideDown('slow');
        $('.yesterday,.tomorrow').slideUp('1000');

      } else if ( $(this).is("#tomorrow") ) {

        $('#yesterday,#today').addClass('badge-secondary').removeClass('badge-dark');
        $('.tomorrow').slideDown('slow');
        $('.yesterday,.today').slideUp('1000');

      }

    });