jQuery Accordion with Tabular Content

JavaScript
1

I have been playing with jQuery Accordions since learning about them in JQUERY: Novice to Ninja. I haven’t been having much problems with them when the content was in an unordered list, and the first one was open by default.

However, when I tried to use in a table, I failed:

http://www.technologistsinc.com/about_ti/careers.php

What I want to have happen:

  1. When one Job Description opens, any other Job Description that is already open now closes
  2. When I click the link in the right-side callout, it opens the relevant Job Description content.

I have tried many different iterations without success. Please let me know what I am missing…

2

I quickly built a simple jQuery Accordion example for you to look at. It is a simplified version of what you built, but does address your two issues.

Take at look here … http://www.nimpkish.com/blog/jquery-accordion-demo

Good luck!

3

nimpkish-media,

I followed your tutorial and used css and div tags. For me, when the items slide up, i loose the space between the heading and the content. Since this is related to css, my question is located at the following link. Would you be able to look into it?

Thanks

4

I really don’t see how this will work … but I will look at it closer once I have a few minutes of free time (the site launch has got me working overtime on everything except what I want to work on!)

5

This is beautiful! Elegant, simple, and it works so well!

God bless you for helping me on this. I really appreciate it. Here is the finished product:

http://www.technologistsinc.com/about_ti/careers.php