Using jquery to hide and show php dynamicly created content "Search Results" - php

Question

I have a table that displays my search results, and pending if a user has a function open I want to only display 5 results per row, and the same if they have it closed I want to show 7 results. This is working fine, but the issue I am having is when I toggle the function the div is hidden or shows but the PHP content that was dynamically created is still visible. I know that the div hides or shows pending the function because I wrote static text in the dynamically create divs and pending the function the text is shown or hidden.
Question: How to hide the php content as well?
PHP content =
/*BIG*/
//begin new row
if($result_incBig == $beginRowBig){
$b .= '<tr>';
//row color
$row_color = ($color_incBig % 2) ? 'tdAltRow_A' : 'tdAltRow_B';
if($i == ($num_qk-1)){
$secondRowClass = 'tdAltRow_noBorder';
}else{
$secondRowClass = 'tdAltRow';
}
//increment the color of the row
++$color_incBig;
}
$b .= '<td class="td_formTitle_noBorder" align="center" style="padding:0px; text-indent: 0;" width="165" height="115" valign="bottom">';
$b .= '<table width="100%" cellpadding="0" cellspacing="0" border="0">';
$b .= '<tr>';
$b .= '<td align="center" style="height:80px; padding:4px; vertical-align:middle;">'.$appendLinkBegin.$companyPic.$appendLinkEnd.'</td>';
$b .= '</tr>';
$b .= '<tr>';
$b .= '<td align="center" style="height:35px; padding:2px; vertical-align:bottom;">'.$appendLinkBegin.'<b>'.$company_name.'</b>'.$addSpace.'<br />'.$num2.' '.$resultText.$appendLinkEnd.'</td>';
$b .= '</tr>';
$b .= '</table>';
$b .= '</td>';
//end row if out of results or reached max num for row
if($result_incBig == $endRowBig){
$b .= '</tr>';
$result_incBig = 0;
}else if(($i+1) == $num_qk){
if($result_incBig < $endRowBig){
for($e=0;$e<=($endRowBig-$result_incBig);++$e){
$b .= '<td class="td_formTitle_noBorder" align="center" style="padding:0px; text-indent: 0;" width="165" height="115" valign="bottom"><!--space--></td>';
}
$b .= '</tr>';
$result_incBig = 0;
}
}
//increment inc
++$result_incBig;
/*END BIG*/
/*SMALL*/
//begin new row
if($result_incSmall == $beginRowSmall){
$s .= '<tr>';
//row color
$row_color = ($color_incSmall % 2) ? 'tdAltRow_A' : 'tdAltRow_B';
if($i == ($num_qk-1)){
$secondRowClass = 'tdAltRow_noBorder';
}else{
$secondRowClass = 'tdAltRow';
}
//increment the color of the row
++$color_incSmall;
}
$s .= '<td class="td_formTitle_noBorder" align="center" style="padding:0px; text-indent: 0;" width="165" height="115" valign="bottom">';
$s .= '<table width="100%" cellpadding="0" cellspacing="0" border="0">';
$s .= '<tr>';
$s .= '<td align="center" style="height:80px; padding:4px; vertical-align:middle;">'.$appendLinkBegin.$companyPic.$appendLinkEnd.'</td>';
$s .= '</tr>';
$s .= '<tr>';
$s .= '<td align="center" style="height:35px; padding:2px; vertical-align:bottom;">'.$appendLinkBegin.'<b>'.$company_name.'</b>'.$addSpace.'<br />'.$num2.' '.$resultText.$appendLinkEnd.'</td>';
$s .= '</tr>';
$s .= '</table>';
$s .= '</td>';
//end row if out of results or reached max num for row
if($result_incSmall == $endRowSmall){
$s .= '</tr>';
$result_incSmall = 0;
}else if(($i+1) == $num_qk){
if($result_incSmall < $endRowSmall){
for($e=0;$e<=($endRowSmall-$result_incSmall);++$e){
$s .= '<td class="td_formTitle_noBorder" align="center" style="padding:0px; text-indent: 0;" width="165" height="115" valign="bottom"><!--space--></td>';
}
$s .= '</tr>';
$result_incSmall = 0;
}
}
//increment inc
++$result_incSmall;
/*END SMALL*/
}
//display table
if($where == ''){
$b = '<input type="hidden" name="numberRes" id="numberRes" value="No Results" />';
$s = '<input type="hidden" name="numberRes" id="numberRes" value="No Results" />';
}
echo '<table cellpadding="0" cellspacing="0" border="0" width="100%">';
//results
echo '<div class="rowFillBig">big7Results'.$b.'</div>';
echo '<div class="rowFillSmall" style="display:none;">small5Results'.$s.'</div>';
echo '</table>';
The Jquery function:
$(function () {
$('#tab_1').click(function(){
$('#tab_vid').toggle();
if ($("#mainContentRF").width() == 825){
$("#mainContentRF").width(1180);
$("audio").width(800);
//if viewing the full screen pause video
<?php if($viewingVideo > ''){ ?>
video = $('.videoplayer').get(0);
video.pause();
<?php } ?>
<!--hide small-->
$(".rowFillSmall").css("display", "none");
<!--show big-->
$(".rowFillBig").css("display", "inline");
}else{
$("#mainContentRF").width(825);
$("audio").width(500);
<!--show small-->
$(".rowFillSmall").css("display", "inline");
<!--hide big-->
$(".rowFillBig").css("display", "none");
}
<!--if tab was left open dont close it-->
<?php if($acc_openValue_1 == '99'){ ?>
})
<?php }else{ ?>
}).click();
<?php } ?>
});
If I can be more clear please let me know. Basically the div and any content inside should hide when asked to, and show when asked.

Answer 1

Place the div's on the outside of the table like this.
echo '<div class="rowFillBig">';
echo '<table cellpadding="0" cellspacing="0" border="0" width="100%">';
//results
echo $b;
echo '</table>';
echo '</div>';
echo '<div class="rowFillSmall" style="display:none;">';
echo '<table cellpadding="0" cellspacing="0" border="0" width="100%">';
//results
echo $s;
echo '</table>';
echo '</div>';