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.
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>';