JavaScript dynamic element filtering functionality

Question

I am creating a Website with different boxes being displayed to the user, and he can filter them by their Status (the dates are stored on a Django database). The possible statuses are "Active", "Upcoming" and "Ended".

The filtering works with Radio buttons, so he clicks whichever he likes and all other elements that don't match that description will be hidden.

I am not sure to how elegant this solution is overall. It seems as if I should aim to remove the repetitive structure at the end.

$(function(){

  // Radio buttons functionality
  var displayAllOption = $('#display-all-infos');
  var displayActiveOption = $('#display-active-infos');
  var displayUpcomingOption = $('#display-upcoming-infos');
  var displayEndedOption = $('#display-ended-infos');

  function showAllInfos(){
    $('.info-box').parent().show();
  }

  function hideInfosThatDontMatchOption(selectedOption){

    var infos = $('.info-box').parent();

    [].forEach.call(infos, function(info){
      var countdownContent = $(info).find('.info-box').find('.card-block').find('.countdown').html();

      // Hide every info that has not started, yet, based on the prefix
      // that is displayed at the beginning of the countdown timer
      if (!countdownContent.startsWith(selectedOption)){
        $(info).hide();
      }
    });
  }

  /*
     First lines change the Color highlighting by toggling the 'active' class

     Filter Logic: Make sure all info boxes are displayed at the beginning, and then
     hide all the info boxes that the User doesn't want to see
  */

  displayAllOption.on('click', function(){
    showAllInfos();
  });

  displayActiveOption.on('click', function(element){

    displayActiveOption.addClass('active')
    displayUpcomingOption.removeClass('active')
    displayEndedOption.removeClass('active')

    showAllInfos();
    hideInfosThatDontMatchOption('Time Left')
  });

  displayUpcomingOption.on('click', function(element){

    displayUpcomingOption.addClass('active')
    displayActiveOption.removeClass('active')
    displayEndedOption.removeClass('active')

    showAllInfos();
    hideinfosThatDontMatchOption('Starts In')
  });

  displayEndedOption.on('click', function(element){

    displayEndedOption.addClass('active') 
    displayActiveOption.removeClass('active')
    displayUpcomingOption.removeClass('active')

    showAllInfos();
    hideInfosThatDontMatchOption('Ended')
  });

});

Here is the Radio Button HTML snippet:

<div class="container" style="display: block; margin: 0 auto;">
    <div class="btn-group" data-toggle="buttons">
      <label id="display-all-infos" class="btn btn-warning">
        <input type="radio" name="options" autocomplete="off" checked> All
      </label>
      <label id="display-active-infos" class="btn btn-success">
        <input type="radio" name="options" autocomplete="off" checked> Active
      </label>
      <label id="display-upcoming-infos" class="btn btn-primary">
        <input type="radio" name="options" autocomplete="off"> Upcoming
      </label>
      <label id="display-ended-infos" class="btn btn-danger">
        <input type="radio" name="options" autocomplete="off"> Ended
      </label>
    </div>
  </div>

I'd appreciate all feedback telling me how I can improve it.

Thanks in Advance!

Answer 1

I find that these all radio buttons are of same group , so you can use same name for all the radio button with different values .

<input type="radio" name="displayOption" value="1" checked> All
<input type="radio" name="displayOption" value="2"> Active....

Now in this case you dont have to add and remove active class for the radio buttons. It will handle it by itself.

and write a common function like

$("input[name='displayOption']").change(function(){
 if ($(this).val() === '1') {
      myFunction();
    } else if ($(this).val() === '2') {
      myOtherFunction();
    } 
});