creating a jquery accordion

Hi I'm hoping to create a accordion with jquery out of 3 divs:

basically I've got three instances of this div

<div id="formcont">
        <h3>Add New Blog Posts :</h3>
        <form id="form1" name="form1" method="post" action="">
          <table width="457" border="0">
            <tr>
              <td width="131">Blog Title:</td>
              <td width="145"><label for="textfield"></label>
              <input name="textfield" type="text" id="textfield" size="40" /></td>
            </tr>
            <tr>
              <td>Blog Content:</td>
              <td><textarea name="textfield2" cols="50" rows="12" id="textfield2">    </textarea&g开发者_JAVA技巧t;</td>
            </tr>
            <tr>
              <td>&nbsp;</td>
              <td><input type="submit" name="button" id="button" value="Submit" /></td>
            </tr>
          </table>
        </form>

        </div>

And I'd like the h3 to be the button and the form to be the content . ALso if someones got the time could they give a brief explanation on how the code works .

Thanks in advance .

---

See this Demo

As per the demo :

add heading class to your h1 tag and wrap your code in <ul id="accordion"> like this :

<ul id="accordion">
  <li>Your Heading and form come here </li>
</ul>

---

I suggest you to try the jQuery accordion. It works with nested lists, definition lists, or just nested divs and has serval options to specify the structure and customize animations.

Everthing else is only css styling (Buttons etc.)