Updating hide and show code problem

Updating hide and show code problem

I'm updating some jquery hide and show code. The new code works on other pages. The difference is the new code on the working pages do not use the table tr and td tags. I think the tr and td tags are interfering or causing the div to be too far removed from the triggering anchor tag.

Old code that uses an old hidenshow.js include script
  1. $(document).ready(function(){
    $('.show_hide').showHide({             
    speed: 1000,
    easing: '',
    changeText: 0
    });
    ...

    <tr>
    <td><a class="show_hide" rel="#slidingDiv3" href="#">Completed:</a></td>
    </tr>
    <tr>
    <td>
    <div id="slidingDiv3">hiden text to show when clicking on Completed above</div>
    </td>
    </tr>


New code using only the jquery library
  1. $(document).ready(function(){
    $(function () {
    $('.trggr').click(function (e) {
    $(this).siblings('.moreinfo').slideToggle(300);
    return false;
    e.preventDefault();//prevent page from scrolling to top after click
    });
    });
    ...

    <tr>
    <td><a class="trggr" href="#">Completed:</a></td>
    </tr>
    <tr>
    <td>
    <div class="moreinfo">hiden text to show when clicking on Completed above</div>
    </td>
    </tr>