Show/Hide Elements Based on URL Parameters Using Vanilla JavaScript

Last update:

When building a website, it’s often useful to be able to show or hide certain elements on the page based on information in the URL. For example, you might want to display different content based on a user’s language preference or show a specific product based on a product ID in the URL. In this article, we’ll explore how to inspect URL parameters and show/hide elements on a webpage based on those parameters using vanilla JavaScript.

Getting URL Parameters

First, we need to be able to get the value of a parameter in the URL. Fortunately, modern browsers provide a built-in API for this called URLSearchParams. This API allows us to parse the query string portion of a URL and get the value of any parameter we’re interested in.

Here’s an example of how to get the value of a parameter called param in the current URL:

const urlParams = new URLSearchParams(window.location.search);
const param = urlParams.get('param');

This code creates a new URLSearchParams object using the window.location.search property, which contains the query string portion of the URL (everything after the ? character). Then, it calls the get method on that object to get the value of the param parameter.

Showing/Hiding Elements

Once we have the value of the parameter we’re interested in, we can use it to show or hide elements on the page. This is typically done by setting the display CSS property of the element to either 'block' (to show the element) or 'none' (to hide the element).

Here’s an example of how to show/hide elements based on the value of a param parameter:

<div id="foo">This is the Foo element</div>
<div id="bar">This is the Bar element</div>
<div id="baz">This is the Baz element</div>

<script>
  const urlParams = new URLSearchParams(window.location.search);
  const param = urlParams.get('param');

  if (param === 'foo') {
    document.getElementById('foo').style.display = 'block';
    document.getElementById('bar').style.display = 'none';
    document.getElementById('baz').style.display = 'none';
  } else if (param === 'bar') {
    document.getElementById('foo').style.display = 'none';
    document.getElementById('bar').style.display = 'block';
    document.getElementById('baz').style.display = 'none';
  } else if (param === 'baz') {
    document.getElementById('foo').style.display = 'none';
    document.getElementById('bar').style.display = 'none';
    document.getElementById('baz').style.display = 'block';
  } else {
    document.getElementById('foo').style.display = 'none';
    document.getElementById('bar').style.display = 'none';
    document.getElementById('baz').style.display = 'none';
  }
</script>

In this example, we have three div elements on the page with IDs foo, bar, and baz. We use the if statements to check the value of the param parameter and set the display property of each element accordingly.

Conclusion

In summary, inspecting URL parameters and showing/hiding elements on a webpage based on those parameters is a useful technique for building dynamic websites. By using the URLSearchParams API and the display CSS property, we can easily accomplish this task using vanilla JavaScript

Back to Posts