Show/Hide element based on URL Parameter

url.js

            // Show #element1 by default 
            // Show #element1 & #element2 by a unique url string 
            // --
            // ! #element2 is hiding by default with a class of `.hide`
            // --
            // if the url string is `?sample=one`
            // show `#element1` widget and hide the `#peakday` widget

            if (location.search == "?sample=one") {
                $('#element1').show();
                $('#element2').hide();
            }
            // if the url string is `?sample=two`
            // hide `#element1` 
            // we are also removing the class of `.hide` from the dom off `#element1`

            else if (location.search == "?sample=two") {
                $('#element1').hide();
                $('#element2').show().removeClass('hide');
            }

Hi Bryan,

Is there a vanilla JS way of doing this? Would make a kick ass JS library that uses a data- parameter that defines the same value as the URL

So if for elements like:

<div data-url=abc1>
<div data-url=def2>
<div data-url=ghi3>

and the URL was website.com?option=abc1&ghi3
would show the 2 divs instead of 3