How to hide div content based on URL values - multiple fields

Question

I have a working code that would hide/show content based on the URL value. example:

www.domain.com/?filter_brands=gucci

will show content that's meant for 'gucci', the rest will remain hidden.

However, if the url gets additional fields/values it stops working.. Example:

www.domain.com/?filter_brands=gucci&query_type_brands=or

does not work.. What do I change in javascript so it reads the first filter_brands value and ignores the rest..? Thanks a lot guys!

Here is the javascript:

    $(document).ready(function() {
    var brands = 'gucci';
    var url = window.location.search;
    brands = url.match(/filter_brands=(.*)/)[1];
    showDiv(brands);
});
function showDiv(brands) {
    $('.boxes').hide();
    $('#' + brands).show();
}

Here is the html:

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="style.css" />
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
    <script src="script.js"></script>
  </head>
  <body>
    <div class="boxes" id="gucci">Gucci is awesome!</div>
    <div class="boxes" id="versace">Versace is da bomb!</div>
    <div class="boxes" id="dolce-gabanna">Dolce & Gabanna is cool!</div>
  </body>
</html>

Here is my the full code on fiddle http://jsfiddle.net/s7V26/

It doesn't hide content on fiddle, because you need to load url with ?filter_brands=gucci but the code works..

See http://stackoverflow.com/questions/901115/how-can-i-get-query-string-values-in-javascript — soktinpk, Jun 04 '14 at 21:21
you should consider a routing script or MVC style setup for this but since you want to do it with URL vars and without some kind of server side language like PHP you I will edit your demo. showDiv won't work because you have it outside the document ready function in jquery. — Jesse, Jun 04 '14 at 21:25

score 1 · Answer 1 · edited May 23 '17 at 11:57

I think you need a better function to get the query string

function getParameterByName(name) {
    name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
    var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
        results = regex.exec(location.search);
    return results == null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
}

// based on this answer How can I get query string values in JavaScript?

showDiv(getParameterByName("filter_brands"));

score 0 · Answer 2 · answered Jun 04 '14 at 21:38

this is the absolute simplest way you can do it since you are only using one url variable it doesn't have to use a complex function to get it you can use the split function to do it. this won't work if there are escaped characters in the name but you don't have any so it should not be an issue for your code.

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="style.css" />
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
  </head>
  <body>
    <div class="boxes" id="gucci">Gucci is awesome!</div>
    <div class="boxes" id="versace">Versace is da bomb!</div>
    <div class="boxes" id="dolce-gabanna">Dolce & Gabanna is cool!</div>
  </body>
</html>
<script>

  $(document).ready(function(){

    function showDiv(brands) {
        $('.boxes').hide();
        $('#' + brands).show();
    }

    // var brands = 'gucci';
    var url = window.location.search;
    var key = url.split("=")[0];
    if(key == "brands") // if you want to check if they used brands as urlvar
        brands = url.split("=")[1];
    showDiv(brands);

  })

</script>

split will convert the urlvar to an array. for example ?brands=gucci will be converted to ["brands", "gucci"] if you are sending more then one variable however it gets more complicated you need to use a function call like some of the answers that others posted. like so

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="style.css" />
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
  </head>
  <body>
    <div class="boxes" id="gucci">Gucci is awesome!</div>
    <div class="boxes" id="versace">Versace is da bomb!</div>
    <div class="boxes" id="dolce-gabanna">Dolce & Gabanna is cool!</div>
  </body>
</html>
<script>

  $(document).ready(function(){

    function showDiv(brands) {
        $('.boxes').hide();
        $('#' + brands).show();
    }

    function getParameterByName(name) {
      name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
      var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
          results = regex.exec(location.search);
      return results == null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
    }

    // var brands = 'gucci';
    var url = window.location.search;
    var brands = getParameterByName("brands");
    showDiv(brands);

  })

</script>

How to hide div content based on URL values - multiple fields

2 Answers2