CODEWITHSUNDEEP
javascriptjquery
Keviin Cosmos
Keviin Cosmos

Reputation: 187

Hide rows on click with jQuery

I have a small self made filter bar for a small agenda. When i click on the filter button i want to hide the rows which are not in the category.

When i click Marketing, it will hide all other categories, and it's the same for the siblings. When i press ALL I want to show all rows again.

I bet there has to be a better way, i just can't figure it out

(function ($) {

  $('#FilterBar a').click(function () {
  
    if ($('#FilterBar a').is('.all')) {
        $('.row').show();
    }
    else if ($('#FilterBar a').is('.pauses')) {
        $('#Agenda .row:not(.pauses)').hide();
    }
    else if ($('#FilterBar a').is('.marketing')) {
        $('#Agenda .row:not(.marketing)').hide();
    }
    else if ($('#FilterBar a').is('.sales')) {
        $('#Agenda .row:not(.sales)').hide();
    }
  });

})(jQuery);
.wrapper {
  padding: 20px;
}
#FilterBar a {
  padding: 5px;
}
#Agenda {
  padding: 15px 5px 5px;
}
#Agenda div {
  padding: 20px;
  background: #e7e7e7;
}
#Agenda div:nth-child(even) {
  padding: 20px;
  background: #f7f7f7;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="wrapper">
  <div id="FilterBar">
    <a href="#all" class="all">All</a>
    <a href="#pauses" class="pauses">Pauses</a>
    <a href="#markering" class="marketing">Marketing</a>
    <a href="#sales" class="sales">Sales</a>
  </div>
  <div id="Agenda">
    <div class="row pauses"><b>Pause:</b> Break at 10:30</div>
    <div class="row marketing"><b>Marketing:</b> This is marketing</div>
    <div class="row sales"><b>Sales:</b> Sales is important</div>
  </div>
</div>

Upvotes: 0

Views: 23

Answers (1)

dave
dave

Reputation: 64657

You could do it like this:

(function ($) {

  $('#FilterBar a').click(function () {
      $('#Agenda .row').hide();
      const className = $(this).attr('class');
      $('#Agenda .' + (className === 'all' ? 'row' : className)).show();
  });

})(jQuery);
.wrapper {
  padding: 20px;
}
#FilterBar a {
  padding: 5px;
}
#Agenda {
  padding: 15px 5px 5px;
}
#Agenda div {
  padding: 20px;
  background: #e7e7e7;
}
#Agenda div:nth-child(even) {
  padding: 20px;
  background: #f7f7f7;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="wrapper">
  <div id="FilterBar">
    <a href="#all" class="all">All</a>
    <a href="#pauses" class="pauses">Pauses</a>
    <a href="#markering" class="marketing">Marketing</a>
    <a href="#sales" class="sales">Sales</a>
  </div>
  <div id="Agenda">
    <div class="row pauses"><b>Pause:</b> Break at 10:30</div>
    <div class="row marketing"><b>Marketing:</b> This is marketing</div>
    <div class="row sales"><b>Sales:</b> Sales is important</div>
  </div>
</div>

Upvotes: 3

Related Questions