Hidden element overlaps text when link is clicked to unhide div tag

Question

I am using Dreamweaver CS4 and using the slide effect.
When the page loads, the div is initially hidden with (disolay:none).  But when i click the link to show the content, the content is displayed but it overlaps the table beneath it.
I am using 4 collapsible panels.  The hidden element is in the second collapsible panel.
Everything works good except that when the table is displayed after clicking the link to unhide it - it overlaps the 3rd and 4th collapsible panel.  When the table is unhidden by clicking the link, the other tables that are in the same collapsible panels move and this is good, but it overlapps the 3rd and 4th collapsible panel though. How do I fix this?
My Code:
<div id="CollapsiblePanel1" class="CollapsiblePanel">
                <div class="CollapsiblePanelTab" tabindex="0">Originating an Processing Loans in Point</div>
                <div class="CollapsiblePanelContent">
                <p> If you're a processor or originator/processor, you are not alone in today's multi-tasking world. Point will help you become more efficient than ever. You will be able to keep everyone who "touches" your loan informed and up-to-date with the time savers you learn in this class. </p>
                  <table width="100%" border="0" cellspacing="5" cellpadding="5">
                    <tr>
                      <td>Optimizing Your Pipeline Reports</td>
                      <td>12/1/2010</td>
                      <td> 1:00PM - 2:00PM CST</td>
                      <td><a href="#">Register Now!</a></td>
                    </tr>
                    <tr>
                      <td width="35%">Optimizing Your Pipeline Reports</td>
                      <td width="11%">12/1/2010</td>
                      <td width="27%"> 1:00PM - 2:00PM CST</td>
                      <td width="27%"><a href="#">Register Now!</a></td>
                    </tr>
                    <tr>
                      <td>Optimizing Your Pipeline Reports</td>
                      <td>12/1/2010</td>
                      <td> 1:00PM - 2:00PM CST</td>
                      <td><a href="#">Register Now!</a></td>
                    </tr>
                    <tr>
                      <td>Optimizing Your Pipeline Reports</td>
                      <td>12/1/2010</td>
                      <td> 1:00PM - 2:00PM CST</td>
                      <td><a href="#">Register Now!</a></td>
                    </tr>
                    <tr>
                      <td colspan="4"> </td>
                    </tr>
                  </table>
                </div>
              </div></td>
</tr>
<tr>
  <td>
  <p>
  </p>
  <p>
  </p>
  <div id="CollapsiblePanel2" class="CollapsiblePanel">
    <div class="CollapsiblePanelTab" tabindex="0">Optimizing Your Pipelne Reports</div>
    <div class="CollapsiblePanelContent">
    <p>If you're a processor or originator/processor, you are not alone in today's multi-tasking world. Point will help you become more efficient than ever. You will be able to keep everyone who "touches" your loan informed and up-to-date with the time savers you learn in this class. </p>
    <table width="100%" border="0" cellspacing="5" cellpadding="5">
                    <tr>
                      <td>Optimizing Your Pipeline Reports</td>
                      <td>12/1/2010</td>
                      <td> 1:00PM - 2:00PM CST</td>
                      <td> <a href="#">Register Now!</a></td>
                      <td width="17%">
  <a onclick="slide_effect.start(); return false;" href="#">View Details</a></td>
                   </tr>
                   </table>
              <div id="shrink1">   <div>
<p class="indentpar">
                      Topics Covered:
                      <ul>
                        <li>Pre-qualifying your prospect</li>
                        <li>Converting the file from Prospect to Borrower</li>
                        <li>Overview of the Loan Application, GFE, and TIL</li>
                        <li>Saving time with Cardex</li>
                        <li>Submitting to Fannie Mae and Loan Prospector</li>
                        <li>Printing &amp; E-mailing forms</li>
                        <li>using task manager to set reminders and tasks</li>
                      </ul>
             </p>
                   </div>
                   </div>
          <script type="text/javascript">
var slide_effect = new Spry.Effect.Slide("shrink1", {duration:1000, from:'0%', to:'100%',toggle:true});
</script>
    <table width="100%" border="0" cellspacing="5" cellpadding="5">
                   <tr>
                      <td width="33%">Optimizing Your Pipeline Reports</td>
                      <td width="12%">12/1/2010</td>
                      <td width="23%"> 1:00PM - 2:00PM CST</td>
                      <td width="32%"> <a href="#">Register Now!</a></td>
                    </tr>
                    <tr>
                      <td>Optimizing Your Pipeline Reports</td>
                      <td>12/1/2010</td>
                      <td> 1:00PM - 2:00PM CST</td>
                      <td><a href="#">Register Now!</a></td>
                    </tr>
                    <tr>
                      <td>Optimizing Your Pipeline Reports</td>
                      <td>12/1/2010</td>
                      <td> 1:00PM - 2:00PM CST</td>
                      <td><a href="#">Register Now!</a></td>
                    </tr>
                    <tr>
                      <td> </td>
                      <td> </td>
                      <td> </td>
                       <td> </td>
                    </tr>
                  </table></div>
  </div></td></tr>
<tr>
  <td>
  <p>
  </p>
  <p>
  </p>
  <div id="CollapsiblePanel3" class="CollapsiblePanel">
    <div class="CollapsiblePanelTab" tabindex="0">Navigating the HUD-1 and HUD-1A</div>
    <div class="CollapsiblePanelContent"><table width="100%" border="0" cellspacing="5" cellpadding="5">
                    <tr>
                      <td>Navigating the HUD-1 and HUD-1A</td>
                      <td>12/1/2010</td>
                      <td> 1:00PM - 2:00PM CST</td>
                      <td> <a href="#">Register Now!</a></td>
                    </tr>
                    <tr>
                      <td width="35%">Navigating the HUD-1 and HUD-1A</td>
                      <td width="11%">12/1/2010</td>
                      <td width="27%"> 1:00PM - 2:00PM CST</td>
                      <td width="27%"> <a href="#">Register Now!</a></td>
                    </tr>
                    <tr>
                      <td>Navigating the HUD-1 and HUD-1A</td>
                      <td>12/1/2010</td>
                      <td> 1:00PM - 2:00PM CST</td>
                      <td><a href="#">Register Now!</a></td>
                    </tr>
                    <tr>
                      <td>Navigating the HUD-1 and HUD-1A</td>
                      <td>12/1/2010</td>
                      <td> 1:00PM - 2:00PM CST</td>
                      <td><a href="#">Register Now!</a></td>
                    </tr>
                    <tr>
                      <td> </td>
                      <td> </td>
                      <td> </td>
                       <td> </td>
                    </tr>
                  </table></div>
  </div></td></tr>
<tr>
  <td>
  <p>
  </p>
  <p>
  </p>
  <div id="CollapsiblePanel4" class="CollapsiblePanel">
    <div class="CollapsiblePanelTab" tabindex="0">Working with the Good Faith Estimate</div>
    <div class="CollapsiblePanelContent"><table width="100%" border="0" cellspacing="5" cellpadding="5">
                    <tr>
                      <td>Working with the Good Faith Estimate</td>
                      <td>12/1/2010</td>
                      <td> 1:00PM - 2:00PM CST</td>
                      <td> <a href="#">Register Now!</a></td>
                    </tr>
                    <tr>
                      <td width="35%">Working with the Good Faith Estimate</td>
                      <td width="11%">12/1/2010</td>
                      <td width="27%"> 1:00PM - 2:00PM CST</td>
                      <td width="27%"> <a href="#">Register Now!</a></td>
                    </tr>
                    <tr>
                      <td>Working with the Good Faith Estimate</td>
                      <td>12/1/2010</td>
                      <td> 1:00PM - 2:00PM CST</td>
                      <td><a href="#">Register Now!</a></td>
                    </tr>
                    <tr>
                      <td>Working with the Good Faith Estimate</td>
                      <td>12/1/2010</td>
                      <td> 1:00PM - 2:00PM CST</td>
                      <td><a href="#">Register Now!</a></td>
                    </tr>
                    <tr>
                      <td> </td>
                      <td> </td>
                      <td> </td>
                       <td> </td>
                    </tr>
                  </table></div>
  </div>

Answer 1

This is why you don't use absolutely positioned elements to do this kind of thing.  Because absolute positioning REMOVES the positioned element from the normal flow, this element then cannot interact with any other element on the page, nor can any other element interact with it.
The better way to do such a thing would be to use abuse 'display:none' to remove the container from the page rather than 'visibility:hidden', and of course, not to use absolute positioning.  Something like this -
<p>Velit esse cillum dolore <a href="#" onclick="document.getElementById('foo1').style.display='inline'">MORE</a> <span id="foo1" class="hidden">sed do eiusmod tempor incididunt ut aliquip ex ea commodo consequat. Duis aute irure dolor lorem ipsum dolor sit amet, ut labore et dolore magna aliqua. In reprehenderit in voluptate quis nostrud exercitation ut aliquip ex ea commodo consequat. Qui officia deserunt sed do eiusmod tempor incididunt eu fugiat nulla pariatur. Ut enim ad minim veniam, lorem ipsum dolor sit amet, consectetur adipisicing elit.</span>
</p>