Question 43085 in Html Question posted in
Some basic documentation can be found here.

How can I filter content cards on the page? – Html

I have created a blog post with three categories: (digital-marketing-category, tips-and-advice-category, cryptocurrency-category)

What I wanted to do is to filter it.

For example, if I want to see all the article for digital-marketing-category, I will click this button to show all the digital-marketing-category and hide other category.

Here’s a sample of my code. The problem with this is my filter is not working. What seems to be the problem?

I tried to add JavaScript to make it work but still it did not work. What seems to be the problem?

document.addEventListener("DOMContentLoaded", () => {
  "use strict";

  /**
   * Article Category Filter
   */
  const filterButtons = document.querySelectorAll('.blog-filters button');
  const articleCards = document.querySelectorAll('.article-card');

  filterButtons.forEach(button => {
    button.addEventListener('click', () => {
      const selectedCategory = button.getAttribute('data-category');

      articleCards.forEach(card => {
        const cardCategory = card.getAttribute('data-category');

        if (selectedCategory === 'all' || selectedCategory === cardCategory) {
          card.style.display = 'block';
        } else {
          card.style.display = 'none';
        }
      });
    });
  });
}); // this line added by community
<section id="blog" class="blog">
  <div class="row">
    <div class="col-md-8">
      <div class="posts-list">
        <div class="row">
          <div class="col-lg-6 col-md-6 d-md-flex article-card" data-category="digital-marketing-category">
            Blog Card
          </div>
          <!-- Article Card -->

          <div class="col-lg-6 col-md-6 d-md-flex article-card" data-category="tips-and-advice-category">
            Blog Card
          </div>
          <!-- Article Card -->

          <div class="col-lg-6 col-md-6 d-md-flex article-card" data-category="cryptocurrency-category">
            Blog Card
          </div>
          <!-- Article Card -->
        </div>
      </div>
    </div>

    <div class="col-md-4">
      <div class="sidebar">
        <h3 class="sidebar-title">Article Categories</h3>
        <div class="blog-filters">
          <button data-category="filter-all">All</button>
          <button data-category="digital-marketing-category">Digital Marketing</button>
          <button data-category="tips-and-advice-category">Tips & Advice</button>
          <button data-category="cryptocurrency-category">Cryptocurrency</button>
        </div>
      </div>
    </div>
  </div>
</section>
Tags:

2

Answers


  1. 0

    In your code, you defined the data-category attribute for your Filter All button as data-category="filter-all". So when the All button is clicked, the selectedCategory variable in the JavaScript code will be set to "filter-all".

    However, in your if statement where articles are filtered by category, the statement compares against "all", which wouldn’t match "filter-all", so no articles will be displayed.

    Here’s your corrected code:

    if (selectedCategory === 'filter-all' || selectedCategory === cardCategory) {
  card.style.display = 'block';
} else {
  card.style.display = 'none';
}

    Also, the JS you provided was missing a }); at the very end, not sure if this is just you accidentally missing that line thought 🙂

    Login or Signup to reply.
  2. 0

    Already solve by @Beau.

    You declare your button filter-all here <button data-category="filter-all">All</button>

    So in your condition if (selectedCategory === 'all' is wrong and it should be if (selectedCategory === 'filter-all' as @Beau said.

    I just add snippet just in case.

    document.addEventListener("DOMContentLoaded", () => {
  "use strict";

  /**
   * Article Category Filter
   */
  const filterButtons = document.querySelectorAll('.blog-filters button');
  const articleCards = document.querySelectorAll('.article-card');

  filterButtons.forEach(button => {
    button.addEventListener('click', () => {
      const selectedCategory = button.getAttribute('data-category');

      articleCards.forEach(card => {
        const cardCategory = card.getAttribute('data-category');

selectedCategory === 'filter-all' || selectedCategory === cardCategory ? card.style.display = 'block' : card.style.display = 'none'

      });
    });
  });
}); // this line added by community
    <section id="blog" class="blog">
  <div class="row">
    <div class="col-md-8">
      <div class="posts-list">
        <div class="row">
          <div class="col-lg-6 col-md-6 d-md-flex article-card" data-category="digital-marketing-category">
            Digital Marketing Category
          </div>
          <!-- Article Card -->

          <div class="col-lg-6 col-md-6 d-md-flex article-card" data-category="tips-and-advice-category">
            Tips and Advice Category
          </div>
          <!-- Article Card -->

          <div class="col-lg-6 col-md-6 d-md-flex article-card" data-category="cryptocurrency-category">
            Crypto Currency Category
          </div>
          <!-- Article Card -->
        </div>
      </div>
    </div>

    <div class="col-md-4">
      <div class="sidebar">
        <h3 class="sidebar-title">Article Categories</h3>
        <div class="blog-filters">
          <button data-category="filter-all">All</button>
          <button data-category="digital-marketing-category">Digital Marketing</button>
          <button data-category="tips-and-advice-category">Tips & Advice</button>
          <button data-category="cryptocurrency-category">Cryptocurrency</button>
        </div>
      </div>
    </div>
  </div>
</section>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search