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.

<script src=""
<script src="jquery/iphone-style-checkboxes.js" type="text/javascript"
<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; }

<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) {


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

  <table><tr class="on_off">
      <input type="checkbox" id="on_off" />

I know following function use for hide and 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.


Or according to your markup:

     $("p").css('display', this.checked ? 'block' : 'none');