jQuery Hide and Show effect with data from php

[JanMolendijk]

Dear Admin I would love to use this script, but their is a problem with the first record in my sql-table (DESC)

The first record (DESC) is not opening, furter all records are opening

Code: Select all

$sql=mysqli_query($conn,"SELECT * FROM `notice_second` WHERE user='$users[email]' ORDER BY `notice_second`.`notice_id` DESC LIMIT 20");

$rehtm='';
// if the $sql contains at least one row
if(mysqli_num_rows($sql) >0){
  //get rows data
  while($row = mysqli_fetch_assoc($sql)){
    $rehtm .='


<script type="text/javascript"><!--
$(document).ready(function() {
  // reveal the tag with id="idd", when the tag with id="btn" is clicked
  $("#btn'. $row['notice_id'] .'").click(function(){
    $("#idd'. $row['notice_id'] .'").show("slow", function() {
      $("#btn'. $row['notice_id'] .'").hide(650);
    });
  });
});
--></script>

<div id="idd'. $row['notice_id'] .'" style="display:none;">

<iframe src="test.php?notice_id='. $row['notice_id'] .'" 
width="100%" height="100%" frameborder="0" scrolling="yes" 
align="top" marginwidth="0" marginheight="0" name="offtopic">
</iframe>
</div>

<button id="btn'. $row['notice_id'] .'">Show</button>';

The php, javascript and html codes are wrong mixed.
It is good to avoid mixing javascript code in php strings.
- Try this:

Code: Select all

<?php
//your code...

$sql=mysqli_query($conn,"SELECT * FROM `notice_second` WHERE user='$users[email]' ORDER BY `notice_second`.`notice_id` DESC LIMIT 20");

$rehtm='';
// if the $sql contains at least one row
if(mysqli_num_rows($sql) >0){
  //get rows data
  while($row = mysqli_fetch_assoc($sql)){
    $rehtm .='<div id="idd'. $row['notice_id'] .'" style="display:none;">
<iframe src="test.php?notice_id='. $row['notice_id'] .'" 
width="100%" height="100%" frameborder="0" scrolling="yes" 
align="top" marginwidth="0" marginheight="0" name="offtopic">
</iframe>
</div>
<button class="btn_notice_id" id="btn_'. $row['notice_id'] .'">Show</button>';
}
}

echo $rehtm;
?>
//this in the html code

<script type="text/javascript">
$(document).ready(function() {
  $('.btn_notice_id').on('click', function(){
    var btn_id = $(this).attr('id');
    $('#idd'+btn_id.replace('btn_', '')).show('slow', function() {
      $('#'+btn_id).hide(650);
    });
  });
});
</script>