How can I get this toggle to work?

Here's my HTML:

<tr>
               <td>
               Vendor
               </td>
               <td>
               <select name="vendor" style="width:600px;" id="vendor">
                  <option></option>
                  <option name="third_party">Third Party</option>
                  <option name="cart">Cart</option>
               </select>
               </td>
            </tr>
            <tr style="display:none;" id="url_row">
               <td>
               URL
               </td>
               <td style="width:550px;">
               <input type="text" style="width:590px;" name="third_party_url" placeholder="Third Party URL">
               </td>
            </tr>

Here's my JQuery:

<script>

$(document).ready(function() {
   $("#vendor").change(function(e) {
      var value = $("#vendor option:selected").val();
      if(value=="Cart") {
         e.preventDefault();
         $("#url_row").css("visibility", "visible");
      }
      else {
         $("#url_row").css("visibility", "hidden");
      }
   });
});

</script>

What I want to do is create the JQuery that will reveal the "url_row" when the user chooses, "Third Party." And if they don't, "url_row" is either hidden on the select change or it merely remains hidden.

I used "toggle" initially, but the "url_row" simply alternated between being visible or hidden irrespective of what the value is.

So...

User chooses, "third_party" then "url_row" is displayed. Otherwise, it's hidden.

How do I pull that off?