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";
    }
}

i dont think thats the problem, because when i click show more i can see more data . the problem is i can see only one row instead of 3 rows. there is something wrong with php mysql while — perastikos1, Jan 12 '18 at 22:47
then use var_dump($record_brands); after the mysql while to see if the query is throwing the results as expected — Art_Code, Jan 12 '18 at 22:51
the first div display none is to hide results more than 3 rows, and the other div display none is the click link to hide data. i think the point is on loop, it stops on 4 rows. sorry i have to go, we will continue it tomorrow. thanks — perastikos1, Jan 12 '18 at 23:41

Art_Code · Answer 1 · 2018-01-13T13:19:30.157

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!

thanks for answer, the only change u told me is to remove return false; from a href. let me ask your question, when the webpage opens then the user can see the first 3 rows, then it comes the if ($i_brands > 3) { ?> — perastikos1, Jan 13 '18 at 21:22
also let me continue, this code (with the errors u told me) its working with no mysql data. i think the problem is on php loop, but i cant find it — perastikos1, Jan 13 '18 at 22:10

Show / hide php mysql results with loader

1 Answers1