How to use the hide / show function in Jquery?

I have one HTML page with one toggle button and some drop down item. My toggle button is like on-off.
What i need?? I need to hide drop down item when i click on "ON" and show drop-down when i click
on "off". I am very newbie on HTML , CSS, JQuery. Here is my code of HTML file which work only
for toggle.

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"
type="text/javascript"></script>
<script src="jquery/iphone-style-checkboxes.js" type="text/javascript"
charset="utf-8"></script>
<link rel="stylesheet" href="style.css" type="text/css" media="screen"
charset="utf-8" />
<style type="text/css">
   body {padding: 10px; }
 th {text-align: right;padding: 4px;padding-right: 15px;vertical-align: top; }
.css_sized_container .iPhoneCheckContainer {width: 250px; }
</style>

<script type="text/javascript" charset="utf-8">
$(window).load(function() {
  $('.on_off :checkbox').iphoneStyle();
  $('.disabled :checkbox').iphoneStyle();
  $('.css_sized_container :checkbox').iphoneStyle({
     resizeContainer: false, resizeHandle: false
  });
  $('.long_tiny :checkbox').iphoneStyle({
     checkedLabel: 'Very Long Text', uncheckedLabel: 'Tiny'
  });

  var onchange_checkbox = ($('.onchange :checkbox')).iphoneStyle({
    onChange: function(elem, value) {
      $('span#status').html(value.toString());

    }
  });

  setInterval(function() {
    onchange_checkbox.prop(
     'checked', !onchange_checkbox.is(':checked')).iphoneStyle("refresh");
    return
  }, 2500);
});

</script>
</head>
<body>
  <table><tr class="on_off">
    <td>
      <input type="checkbox" id="on_off" />
    </td>
  </tr></table>
</body>
</html>

I know following function use for hide and show.

$(document).ready(function(){
   $("#hide").click(function(){
      $("p").hide();
   });
    $("#show").click(function(){
      $("p").show();
   });
});

But i don't understand how this function implement in javascript.
because above function work on two button and i use only one button..
Please give me any hint or direct me where i wrong?....


You can use toggle method:

Display or hide the matched elements.

$("#button").click(function(){
     $("p").toggle();
});

Or according to your markup:

$("#on_off").change(function(){
     $("p").css('display', this.checked ? 'block' : 'none');
});