Вопросы Теги

Как делать фильтр?

Я попробован реализовывать фильтр, но у меня нет идеи, как делание этого, я могу получать подсказки, фильтр функционирует следующего способа:
Когда они дадут одному из 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>
12
задан 26.07.2019, 18:04
0 ответов