Я попробован реализовывать фильтр, но у меня нет идеи, как делание этого, я могу получать подсказки, фильтр функционирует следующего способа:
Когда они дадут одному из tags click в верхней части, нужно мочь являться контентом, у которого есть TAG, выбранный в верхней части, если один из tags не имеет, статья, выбранная в верхней части должна скрываться.
PD: у меня есть 2 статьи, каждая статья имеет tags и нужно мочь выдавать / показывать согласно tags в верхней части
$(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>