How to use javascript change function to toggle a paragraph?
<p>I want to toggle an input via a checkbox. Here's the code:</p>

<h2>css:</h2>

<pre><code>.moveaway{ position:absolute;top:-999rem;}
</code></pre>

<h2>html</h2>

<pre><code>&lt;p&gt;
&lt;label&gt;&lt;?php _e('Setup Template')?&gt;&lt;/label&gt;
&lt;input class="check-toggle" name="toggle" type="checkbox" value="1" &lt;?php echo $template ? 'checked="checked' : '';?&gt; /&gt;
&lt;/p&gt;
&lt;p id="template-input" class="&lt;?php echo $template ? '' : 'moveaway'?&gt;"&gt;
&lt;lable for="template-name"&gt;Template Name&lt;/lable&gt;
&lt;input id="template-name" type="text" name="template-name"  value="&lt;?php echo $tamplate; ?&gt;" /&gt;
&lt;/p&gt;
</code></pre>

<h2>javascript:</h2>

<pre><code>$("input.check-toggle").change(function() {
  if ($(this).is(':checked')) {
    $("p#template-input").attr('class','');
  }else{
    $("p#template-input").attr('class','moveaway');
    $("input#template-name").val(0);
  }
});
</code></pre>

<p>The above code works when the template-name input field is empty. When the template-name field value is set, the wrapper <code>p#template-input</code> gets merged in to the p which contains the check-toggle input.</p>

<p>I don't understand how the change function made this. I would like to learn how to get the result that the p#template-input can be toggled by the checkbox.</p>
