Build a JavaScript Dropdown Filter Component With Shareable URLs

3. Apply the JavaScript

Moving forward, we’ll now focus on the interactivity part!

Toggle Dropdown’s State

As said, initially, the dropdown won’t appear.

Once we click the trigger button, we’ll toggle the open class of the dropdown wrapper which will produce the following behavior:

• Toggle the dropdown visibility.
• Manipulate the aria-expanded attribute value of the trigger as well as the look and feel of its SVG icon.

Here’s the required JavaScript code:

1

const dropdownWrapper =document.querySelector(".dropdown-wrapper");

2

const dropdownToggle = dropdownWrapper.querySelector(".dropdown-toggle");

3

const OPEN_CLASS = "open";

4

5

dropdownToggle.addEventListener("click", function () {

6

  if (this.getAttribute("aria-expanded") == "true") {

7

    this.setAttribute("aria-expanded", "false");

8

  } else {

9

    this.setAttribute("aria-expanded", "true");

10

  }

11

  dropdownWrapper.classList.toggle(OPEN_CLASS);

12

});

And the relevant styles:

1

.dropdown-wrapper .dropdown-toggle svg {

2

  transition: transform 0.3s;

3

}

4

5

.dropdown-wrapper.open .dropdown-toggle svg {

6

  transform: rotate(180deg);

7

}

8

9

.dropdown-wrapper.open .dropdown {

10

  display: block;

11

}

Filtering

The filtering will occur each time we click on a dropdown menu link.

At that point, we’ll take care of the following things:

1. Remove the active class from the existing dropdown menu item.
2. Add the active class to the parent item of the clicked link. 
3. Hide the dropdown by removing the open class from the dropdown wrapper.
4. Apply aria-expanded="false" to the dropdown toggle button.
5. Replace the dropdown trigger’s text with the link’s text.
6. Grab and evaluate the link ID. If it contains the all keyword, we remove the hidden class from all boxes and restore the default value for the dropdown trigger’s text. Otherwise, we add the hidden class to the boxes whose data-type value doesn’t match the link ID value. At the same time, we also remove the hidden class from the boxes whose data-type value matches the link ID value.
7. Update the counter’s text with the number of the visible boxes.

Here’s the required JavaScript code:

1

...

2

3

dropdownLinks.forEach(function (link) {

4

  link.addEventListener("click", function (e) {

5

    e.preventDefault();

6

    const parent = this.parentElement;

7

    const color = this.getAttribute("id");

8

    // 1

9

    dropdown.querySelector("li.active").classList.remove(ACTIVE_CLASS);

10

    // 2

11

    parent.classList.add(ACTIVE_CLASS);

12

    // 3

13

    dropdownWrapper.classList.remove(OPEN_CLASS);

14

    // 4

15

    dropdownToggle.setAttribute("aria-expanded", false);

16

    // 5

17

    dropdownToggleSpan.innerText = this.innerText;

18

19

    // 6

20

    if (color == "all") {

21

      boxes.forEach((box) => box.classList.remove(HIDDEN_CLASS));

22

      dropdownToggleSpan.innerText = 'Filter Colors';

23

      // 7

24

      total.innerText = boxes.length;

25

    } else {

26

      const includedBoxes = boxesList.querySelectorAll(

27

        `[data-type="${color}"]`

28

      );

29

      const excludedBoxes = boxesList.querySelectorAll(

30

        `li:not([data-type="${color}"])`

31

      );

32

      excludedBoxes.forEach((box) => box.classList.add(HIDDEN_CLASS));

33

      includedBoxes.forEach((box) => box.classList.remove(HIDDEN_CLASS));

34

      // 7

35

      total.innerText = includedBoxes.length;

36

    }

37

  });

38

});

🎁 Bonus: Unique Shareable URLs

So far, our filter JavaScript component looks great! However, let’s move on and make each filter have a unique shareable URL. 

This behavior is pretty useful in case we want to send users to the page that contains the filter component but with prefiltered content. Think how beneficial it would be from the marketing perspective for running campaigns. Imagine, for example, that on a real e-shop page, the filters are the product categories while the boxes are the products. 

To accomplish this, as a first step, we’ll update the page URL without forcing a page to reload via the pushState() method upon dropdown menu clicking based on the user selection.

Again, to test it, view the demo in debug mode. When the user selects a color, the page URL receives an extra parameter that disappears if users opt for all colors.

Here are the two extra lines that we have to embed within the previous JavaScript code:

1

dropdownLinks.forEach(function (link) {

2

  link.addEventListener("click", function (e) {

3

    if (color == "all") {

4

      /*extra*/

5

      history.pushState(null, "", location.href.split("?")[0]);

6

    } else {

7

      /*extra*/

8

      history.pushState(null, "", `?color=${color}`);

9

    }

10

  });

11

});

With this extra code, our URL changes. But, does the right content appear after we reload the page? Well, not yet; we’ll still see all the boxes. To bring only the correct boxes in view, we should add some additional code.

To be more specific, we’ll take care of the following things:

1. Check to see whether the URL contains the color parameter.
2. If that’s the case, we’ll grab its value and thus the target filter option link.
3. Remove the active class from the existing dropdown menu item.
4. Add the active class to the parent item of the link.
5. Replace the dropdown trigger’s text with the link’s text.
6. Add the hidden class to the boxes whose data-type value doesn’t match the link. At the same time, we also remove the hidden class from the boxes whose data-type value matches the link.
7. Update the counter’s text with the number of the visible boxes.

Here’s the required JavaScript code:

1

...

2

3

// 1

4

const params = new URLSearchParams(location.search);

5

if (params.has("color")) {

6

  // 2

7

  const color = params.get("color");

8

  const link = document.getElementById(color);

9

10

  // 3

11

  dropdown.querySelector("li.active").classList.remove(ACTIVE_CLASS);

12

  // 4

13

  link.parentElement.classList.add(ACTIVE_CLASS);

14

  // 5

15

  dropdownToggleSpan.innerText = link.innerText;

16

  const includedBoxes = boxesList.querySelectorAll(`[data-type="${color}"]`);

17

  const excludedBoxes = boxesList.querySelectorAll(

18

    `li:not([data-type="${color}"])`

19

  );

20

  excludedBoxes.forEach((box) => box.classList.add(HIDDEN_CLASS));

21

  includedBoxes.forEach((box) => box.classList.remove(HIDDEN_CLASS));

22

  // 6

23

  total.innerText = includedBoxes.length;

24

}

Conclusion

Congrats, folks! During this journey, we developed a solid JavaScript dropdown filter component that handles filtering on the browser side and provides identifiable URLs.

Go ahead, optimize the code if you want, and try it in your upcoming projects!

Before closing, let’s once again remind ourselves of today’s creation:

If you’d like to see an equivalent implementation where data are filtered on the server before being ready to the browser this time, let me know in the demo comments!

As always, thanks a lot for reading!

Discover More Filtering Tutorials

Want to master client-side filtering with CSS and JavaScript? If so, have also a look at these tutorials: