Show / hide php mysql results with loader

Question

I have MySQL database results.

I want to show 3 rows and then hide rest.

When the user clicks to load more data then to appear all rows.

The problem is when I click show more, then only one more row appears.

<?php
$query_brands = mysql_query("SELECT distinct pd_filter1 from tbl_brands2 WHERE pd_code in (select pd_code from tbl_product where cat_id='2')") or die(mysql_error());
$count_brands  = mysql_num_rows($query_brands);
  if($count_brands > 0) {
  while($fetch_brands = mysql_fetch_array($query_brands)) {
    $record_brands[] = $fetch_brands;
  }
  }

$i_brands=0;
foreach($record_brands as $records_brands) {                                
?>
<table border="1" width="215" style="border-collapse: collapse;  border-spacing: 0;" bgcolor="#eeeff0">
  <tr>
    <td>
<?php
      $i_brands = $i_brands + 1;
      if ($i_brands > 3)
        {
?>
        <div id="myDIV_Filter1_1" style="display:none";>
<?php
        }
      }
?>
    <div id="myDIV_Filter1_2">
      <span class="class22">
        <a href="#" onclick="myFunction();return false;">show more...</a>
      </span>
    </div>  

    <div id="myDIV_Filter1_3" style="display:none";>
      <span class="class22">
        <a href="#" onclick="myFunction();return false;">show less...</a>
      </span>
    </div>  

    </td>
  </tr>
</table>

JavaScript

function myFunction() {
    var x_filter1_1 = document.getElementById("myDIV_Filter1_1");
    var x_filter1_2 = document.getElementById("myDIV_Filter1_2");
    var x_filter1_3 = document.getElementById("myDIV_Filter1_3");
    if (x_filter1_1.style.display === "none") {
        x_filter1_1.style.display = "block";
        x_filter1_2.style.display = "none";
        x_filter1_3.style.display = "block";
    } else {
        x_filter1_1.style.display = "none";
        x_filter1_2.style.display = "block";
        x_filter1_3.style.display = "none";
    }
}

Answer 1

You have some errors on your code:

1) Try not to use return the way you are using right now in code lines like this one:

<a href="#" onclick="myFunction();return false;">show more...</a>

You can use it better like it's explained here

2) You have all your divs of the code example in display none , the user will never see the information in those divs because you don't have any code to start showing some of them. In the same line you put a ";" after the style but it must be inside the style. This line has an error:

<div id="myDIV_Filter1_3" style="display:none";>

It must be this way:

<div id="myDIV_Filter1_3" style="display:none;">

The "show-hide" logic on your javascript function myFunction has an error because your div id="myDIV_Filter1_1" contains the other 2 div you have on your code example so you can't hide this particular div because you will lose the "show" or "hide" of the other 2 divs. That way it'll never show you the other 3 rows you wanted to see. I fixed all the errors you can check the code on my snippet here:

 function myFunction() { var x_filter1_1 = document.getElementById("myDIV_Filter1_1"); var x_filter1_2 = document.getElementById("myDIV_Filter1_2"); var x_filter1_3 = document.getElementById("myDIV_Filter1_3"); if (x_filter1_3.style.display === "none") { x_filter1_1.style.display = "block"; x_filter1_2.style.display = "none"; x_filter1_3.style.display = "block"; } else { x_filter1_1.style.display = "block"; x_filter1_2.style.display = "block"; x_filter1_3.style.display = "none"; } } 

 <?php $query_brands = mysql_query("SELECT distinct pd_filter1 from tbl_brands2 WHERE pd_code in (select pd_code from tbl_product where cat_id='2')") or die(mysql_error()); $count_brands = mysql_num_rows($query_brands); if($count_brands > 0) { while($fetch_brands = mysql_fetch_array($query_brands)) { $record_brands[] = $fetch_brands; } } $i_brands=0; foreach($record_brands as $records_brands) { ?> <table border="1" width="215" style="border-collapse: collapse; border-spacing: 0;" bgcolor="#eeeff0"> <tr> <td> <?php $i_brands = $i_brands + 1; if ($i_brands > 3) { ?> <div id="myDIV_Filter1_1"> <?php } } ?> <div id="myDIV_Filter1_2" > <span class="class22"> <a href="#" onclick="myFunction();">show more...</a> </span> </div> <div id="myDIV_Filter1_3" style="display:none"> <span class="class22"> <a href="#" onclick="myFunction();">show less...</a> </span> </div> </td> </tr> </table> 

Hope it helps!