Hide/display sections on the fly?

Hi there

Wonder if you can help me?

I have the following div's

<div id="section1" style="background-position: 0% 0%; width: 100%">
<table style="border-top: #000000 0px; border-left: #000000 0px; width: 100%" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td>
  Title of menu here
</td>
</tr>
<tr>
<td>
  Body of section here
</td></tr></tbody></table></div>

<div id="section2" style="background-position: 0% 0%; width: 100%">
<table style="border-top: #000000 0px; border-left: #000000 0px; width: 100%" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td>
  Title of menu here also 123
</td>
</tr>
<tr>
<td>
  Body of section here as well
</td></tr></tbody></table></div>

<div id="section3" style="background-position: 0% 0%; width: 100%">
<table style="border-top: #000000 0px; border-left: #000000 0px; width: 100%" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td>
  Title of menu here, la la la
</td>
</tr>
<tr>
<td>
  lots of tables, images etc here
</td></tr></tbody></table></div>

What I would like is some clever JS that will scan the page, if it finds any ID's called sectionX (in our case section1, section2, section3) it will automatically place an image before the title (the image will be a + icon), also the body of the text will be hidden. If I click on the + icon or the title it will display the text body, and it will change the icon to a - icon. In other words, if we take this example:

<div id="section2" style="background-position: 0% 0%; width: 100%">
<table style="border-top: #000000 0px; border-left: #000000 0px; width: 100%" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td>
  Title of menu here also 123
</td>
</tr>
<tr>
<td>
  Body of section here as well
</td></tr></tbody></table></div>

1st - the JS will will scan the page, and get all the divs that have id = section1, section2 or section3
2nd - it will place a + icon before the title i.e.    + Title of menu here also 123
3rd - it will hide the body content i.e.   Body of section here as well
4th - if I click on either the **title or the + icon** it will display the content i.e. Body of section here as well, having clicked on the title or the image, it will also change the icon to a - icon so we now have ...      - Title of menu here also 123
5th - if I click on the **title or the - icon**, it will hide the text content, and change the - icon to a + icon

This applys to the rest of the ID's where it is section1,2,3

I hope this makes sense?
If not please let me know

Many thanks
Mousemat24Start Free Trial