How can I use Jquery show() hide() table rows based on a query string variable??

Question

I have a landing page with several actions. The action are within table rows that are hidden by default and open when a user clicks the action title. I want to control what is shown/hidden based on a query string variable.

For example one of the actions is "Request a call." There are links on other pages of the site to request a call. When a user clicks that link I want them to go to the landing page with the "Request a call" row shown.

Answer 1

Could you not do some server side processing to generate the necessary processing? i.e using RAW PHP as you have not stated the server side language you could do:

<?
$showRow = "";
switch($_GET['title'])
{
   case "call":
   //$showRow is the id of the row to be shown
   $showRow ="call"
   break;
}
?>

...rest of page....

<script type="text/javascript">
   $(document).ready(function() {
    //show the row
    $("#<?=$showRow;?>").show();
   });
</script>

You could also set the id of the row to be the URL argument to cut out the need for a switch. You'd also need to do some null tests to make sure that the jquery doesn't try to show a row if a URL argument is not shown.

Answer 2

Nicked lots of stuff from this article and CMS's excellent answer to a similar question.

Using a query string variable called showRow and passing it the id of the row to show (not fantastically sophisticated but a good starting point).

Using jQuery for the showing the requested row:

<table>
  <thead>
    <tr>
        <th>col 1</th>
    </tr>
  </thead>
  <tbody>
    <tr id="row1" style="display: none;">
      <td>this is row 1</td>
    </tr>
    <tr id="row2" style="display: none;">
      <td>this is row 2</td>
    </tr>
  </tbody>
</table>

<script type="text/javascript">
    $(document).ready(function() {
        var row = getQueryString()["showRow"];
        if (row !== undefined) $("table tr#" + row + "").show();
    });

    getQueryString = function() {
        var assoc = [];
        var keyValues = unescape(location.search.substring(1)).split('&');
        for (var i in keyValues) {
            var key = keyValues[i].split('=');
            assoc[key[0]] = key[1];
        }
        return assoc;
    }
</script>