title: better way to show/hide div element after click on input field
body: <p>I have two input field like this</p>
  
  <pre><code>&lt;input type="text" class="span3" id name="name" &gt;
  &lt;input type="text" class="span3" id name="phone" &gt;
  
  &lt;div class="show-example1"&gt;
        show content 1
  &lt;/div&gt;
  &lt;div class="show-example2"&gt;
        show content 2
  &lt;/div&gt;
  </code></pre>
  
  <p>I want to show only div element "show-example1"  after click on input field "name"</p>
  
  <p>and show only div element "show-example2" after click on input field "phone"</p>
  
  <p>For this i made two div element associated with each input field.</p>
  
  <p>Below is my script for performing above action</p>
  
  <pre><code> $('.show-example1').hide();
    $('.show-example2').hide();
  
  $("input[name='name']").bind("click", function(event){
  
              $('.show-example2').hide();
              $('.show-example1').show(400);
              return false;
  
          }); 
  
      $("input[name='phone']").bind("click", function(event){
  
              $('.show-example1').hide();
              $('.show-example2').show(400);
              return false;
  
          });
  </code></pre>
  
  <p>My script is working fine but i just want to know a better way to do above action.</p>