Как отфильтровать сообщения в блоге по хэштегам?

Question

Я хочу отфильтровать сообщения в блоге по хэштегам.

, который эффективно показывает только сообщения с одинаковым идентификатором блога и перемещает их в верхнюю часть страницы.

Также кнопка насверху, чтобы показать все.

Я пытался использовать этот урок w3 https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_portfolio_gallery_filter

Однако, поскольку он добавляет display: none, display: block классы, он мешает самой записи блога.

Ниже приведена структура одного из отдельных сообщений в блоге.

<div><!--Hide/Show based on what hashtag-->
    <div> <!--Blog Post-->
        <div> <!--Blog Content which also Hide/show-->
            <div>
                <!--blog content 1-->
            </div>
            <div>
                <!--blog content 2-->
            </div>
            <div>
                <!--blog content 3-->
            </div>
            <div><!--blog pagination--></div>
            <div><!--#Hashtag id--></div>
        </div>
    </div>
</div>

Answer 1

Для всех, кто в одной лодке. Вот решение:

JS

$(document).ready(function () {
    $(".filter-id-1").click(function () {
        $(".id-2, .id-3").fadeOut(200);
        $(".id-1").fadeIn(200);
    });
    $(".filter-id-2").click(function () {
        $(".id-1, .id-3").fadeOut(200);
        $(".id-2").fadeIn(200);
    });
    $(".filter-id-3").click(function () {
        $(".id-1, .id-2").fadeOut(200);
        $(".id-3").fadeIn(200);
    });
    $(".filter-all").click(function () {
        $(".id-1, .id-2, .id-3").fadeIn(200);
    });
});

HTML

<a href="#" class="filter-all">All</a> <!--Button to filter all-->

<div class="id-1 all">
<div> <!--Blog Post--></div>
<a href="#" class="filter-id-1 id-1 all">Hashtag #id 1</a>
</div>

<div class="id-2 all">
<div> <!--Blog Post--></div>
<a href="#" class="filter-id-2 id-2 all">Hashtag #id 2</a>
</div>

<div class="id-3 all">
<div> <!--Blog Post--></div>
<a href="#" class="filter-id-3 id-3 all">Hashtag #id 3</a>
</div>