title: Jquery question: How can I break up a multi-part form so that only one fieldset is visible at a time?
body: <p>I have a firm grasp on XHTML &amp; CSS, but PHP &amp; Javascript look like magic to me.</p>
  
  <p>I'm building a discussion site using the PHP-based <a href="http://textpattern.com" rel="nofollow noreferrer">Textpattern CMS</a>. When users are logged in, they can use a public-side form to add a new discussion topic. There are a lot of input fields, grouped by the HTML <code>fieldset</code> element within a single <code>form</code> element that adds a new row to a specific database table. What I want to do is <strong>show only one fieldset at a time</strong>, inserting <em>previous</em> and <em>next</em> links that will allow people to <strong>navigate between fieldsets</strong>.</p>
  
  <p>Textpattern comes bundled with jquery, and I found a <a href="http://blog.vokle.com/index.php/2008/08/22/babysteps/" rel="nofollow noreferrer">jquery plugin that describes this functionality</a>. But I can't get it to work.</p>
  
  <p>Here's what I have in my document <code>head</code>:</p>
  
  <pre><code>&lt;style type="text/css" media="screen"&gt;
      fieldset {display: none;}
  &lt;/style&gt;
  &lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="http://site.url/scripts/jquery.babysteps-0.2.1.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" language="javascript"&gt;
      $('#step1').bindStep('#step2');
      $('#step2').bindStep('#step3');
  
      $('#step1').show();
  &lt;/script&gt;
  </code></pre>
  
  <p>My form is something like this:</p>
  
  <pre><code>&lt;fieldset id="step1"&gt;
      &lt;legend&gt;Step 1 Fields&lt;/legend&gt;
      &lt;!-- fields --&gt;
  &lt;/fieldset&gt;
  &lt;fieldset id="step2"&gt;
      &lt;legend&gt;Step 2 Fields&lt;/legend&gt;
      &lt;!-- fields --&gt;
  &lt;/fieldset&gt;
  &lt;fieldset id="step3"&gt;
      &lt;legend&gt;Step 3 Fields&lt;/legend&gt;
      &lt;!-- fields --&gt;
  &lt;/fieldset&gt;
  &lt;input type="submit" value="Post this Article!" /&gt;
  </code></pre>
  
  <p>The results are that the <code>style</code> declaration hides <em>every</em> <code>fieldset</code>, but the script doesn't show <code>step1</code> at all. I've double-checked all the file paths, and I've tried this using a link to my local jquery bundle instead of the Google version, but I get the same results.</p>
  
  <p>I would be happy if I could get this working, but if there is another way to achieve this without the babysteps plugin, I'd be happy with that outcome as well.</p>
  
  <p>Any guidance or concrete advice you can offer would be greatly appreciated! Step-by-step instructions or practical troubleshooting questions (Do you have your computer plugged in?) might also be helpful.</p>
  
  <p>Thanks in advance!</p>