title: How to use hide/show function in Jquery?
body: <p>I have one <code>HTML</code> page with one toggle button and some drop down item. My toggle button is like on-off.<br>
  What i need??   I need to hide drop down item when i click on "ON" and show drop-down when i click<br>
  on "off". I am very newbie on <code>HTML , CSS, JQuery</code>. Here is my code of HTML file which work only<br>
  for toggle.  </p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" 
  type="text/javascript"&gt;&lt;/script&gt;
  &lt;script src="jquery/iphone-style-checkboxes.js" type="text/javascript"
  charset="utf-8"&gt;&lt;/script&gt;
  &lt;link rel="stylesheet" href="style.css" type="text/css" media="screen"
  charset="utf-8" /&gt;
  &lt;style type="text/css"&gt;
     body {padding: 10px; }
   th {text-align: right;padding: 4px;padding-right: 15px;vertical-align: top; }
  .css_sized_container .iPhoneCheckContainer {width: 250px; }
  &lt;/style&gt;
  
  &lt;script type="text/javascript" charset="utf-8"&gt;
  $(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);
  });
  
  &lt;/script&gt;  
  &lt;/head&gt;
  &lt;body&gt;
    &lt;table&gt;&lt;tr class="on_off"&gt;
      &lt;td&gt;
        &lt;input type="checkbox" id="on_off" /&gt;
      &lt;/td&gt;
    &lt;/tr&gt;&lt;/table&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>I know following function use for hide and show.    </p>
  
  <pre><code>$(document).ready(function(){
     $("#hide").click(function(){
        $("p").hide();
     });
      $("#show").click(function(){
        $("p").show();
     });
  });  
  </code></pre>
  
  <p>But i don't understand how this function implement in <code>javascript</code>.<br>
    because above function work on two button and i use only one button..<br>
    Please give me any hint or direct  me where i wrong?....</p>