CODEWITHSUNDEEP
jqueryhtmlaccordion
Infra Stank
Infra Stank

Reputation: 816

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></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 .

Upvotes: 0

Views: 354

Answers (2)

Tushar Ahirrao
Tushar Ahirrao

Reputation: 13115

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>

Upvotes: 1

gearsdigital
gearsdigital

Reputation: 14205

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.)

Upvotes: 0

Related Questions