Filter to select content

Question

good afternoon.

I’m trying to create a filter that displays only the content of enabled, disabled and all elements.

Example:

As in the example above, I have a select with the options (All , Active and Closed) the concept is, by clicking on all, will appear both active and closed Divs. Clicking on active will display only active and closed ones.

I couldn’t find a plugin that runs this feature, will anyone help me?

Thank you

Follows the html

<div class="filtros">
<div class="reg-title col-md-2 col-lg-2">
<p> Visualizar: </p>
</div>
<div class="reg-title col-md-3 col-lg-3">
<select id="cp-gifts">
    <option value="todas">Todas</option>                           
    <option value="ativas">Ativas</option>

    <option value="encerradas">Encerradas</option>                           
</select>
</div>
</div>

<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">


<section class="div1">
<div class="row">
<div class="col-sm-12 col-md-4 col-lg-4">
<article class="col">
<div class="box-regulamento">
<h3>Promoção Ativa</h3>
<br>
<span>Validade da promoção: </span>

<p>02/01/19 a 06/03/19</p>
<br>
<a class="btn-primary button-gift" href="https://www.pontoslivelo.com.br/regulamento" target="_blank">Saiba Mais</a></div>
</article>
</div>


<div class="col-sm-12 col-md-4 col-lg-4">
<article class="col">
<div class="div2">
<h3>Promocao Encerrada</h3>
<br>
<span>Validade da promoção: </span>

<p>01/02/19 a 31/02/10</p>
<br>
<a class="btn-primary button-gift" href="https://www.pontoslivelo.com.br/regulamento" target="_blank">Saiba Mais</a></div>
</article>
</div>
</div>
</section>
</div>

Answer 1

I made a very basic example following your example using jQuery, basically what you do is every change in select he shows the card according to the value of the select:

$(function() {
  let filtro = $('#filter');
  
  filtro.on('change', function() {
    if(filtro.val() == 'active') {
      $('.card1').show();
      $('.card2').hide();
    } else if(filtro.val() == 'closed') {
      $('.card2').show();
      $('.card1').hide();
    } else {
      $('.card1, .card2').show();
    }
  })
})

.cards {
  width: 45%;
  background-color: #CCC !important;
  margin: 10px;
  text-align: center;
}
.btn {
  width: 150px;
  margin-top: 30px;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>

<select class="form-control" id="filter">
  <option>Todas</option>
  <option value="active">Ativas</option>
  <option value="closed">Encerradas</option>
</select>

<div class="container">
  <div class="row">
    <div class="cards card1">
      <div class="card-body">
        <h5 class="card-title">Promoção Ativa</h5>
        <p class="card-text">Validade da promoção:
02/01/19 a 06/03/19</p>
        <p class="card-subtitle mb-2 text-muted">data</p>
        <button type="button" class="btn btn-primary">Saiba mais</button>
      </div>
    </div>

    <div class="cards card2">
      <div class="card-body">
        <h5 class="card-title">Promoção Encerrada</h5>
        <p class="card-text">Validade da promoção:
01/02/19 a 31/02/10</p>
        <p class="card-subtitle mb-2 text-muted">expirada</p>
        
        <button type="button" class="btn btn-danger">Saiba mais</button>
      </div>
    </div>
  </div>
</div>