Estoy intentado realizar un filtro pero no tengo idea como hacerlo, puedo recibir sugerencias, el filtro funciona de la siguiente manera:
Cuando le den click a uno de los tags en la parte superior se debe poder mostrar el contenido que tenga el TAG seleccionado en la parte superior, si uno de los tags no tiene el item seleccionado en la parte superior se debe ocultar.
PD: tengo 2 items, cada item tiene tags y se debe poder filtrar/mostrar de acuerdo a los tags en la parte superior
$(document).ready(function(){
$('.content__item__filter span').on('click', function() {
$(this).toggleClass('active__tag');
var value = $(this).text().toLowerCase();
$(".content__item__tag .content__tags").filter(function() {
$('.content__item__tag').toggle($(this).text().toLowerCase().indexOf(value) > -1);
});
});
});
.content__item__filter span.active__tag {
background-color: #c6a067;
}
.content__body {
padding: 20px;
}
.content__item__filter span {
padding: 5px 10px;
display: inline-block;
margin: 5px;
background-color: #697084;
color: #fff;
border-radius: 5px;
font-size: 14px;
cursor: pointer;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<div class="content__body">
<div class="content__item__filter">
<span>IoT</span>
<span>Firmware</span>
<span>RPI</span>
<span>Blockchain</span>
<span>GIMP</span>
</div>
<!-- Tag 1 -->
<div class="content__item item content__item__tag">
<h3 class="content__item__subtitle">Title 1. Lorem ipsum</h3>
<div class="">
<div class="tag__date">06 - 2014</div>
<div class="content__item__description__tag">
<div class="content__item__image">
<h4>imagen</h4>
<!--<img src="">-->
</div>
<p class="mt-0">
Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
<div class="content__tags">
<span>Tags: IoT, Lorem, ipsum, dolor, sit amet</span>
</div>
</div>
</div>
<!-- End Tag 1 -->
<!-- Tag 2 -->
<div class="content__item item content__item__tag">
<h3 class="content__item__subtitle">Title 2. Consectetur adipiscing elit.</h3>
<div class="">
<div class="tag__date">09 - 2015</div>
<div class="content__item__description__tag">
<div class="content__item__image">
<h4>imagen</h4>
<!--<img src="">-->
</div>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.
</p>
</div>
<div class="content__tags">
<span>Tags: Firmware, Lorem, ipsum, dolor, sit amet</span>
</div>
</div>
</div>
<!-- End Tag 2 -->
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>