Vir Vir - 3 months ago 11
CSS Question

How to apply onclick event to html tag when it displays in a loop

I created a Php page which retrieves data from MySQL database. I inserted four records into database. the data displays fine on index.php page but I want to display record like shown in image attached here. I want that all records are closed and when click on name it will open. other are remain closed and when other is open previous is closed. right now when run in browser when I click any name only first record is display. (Or any other way to do this with php,MySQL,etc.) Any help ?
enter image description here

index.php :

<?php

ob_start();
define('DB_SERVER', 'localhost');
define('DB_USERNAME', 'root');
define('DB_PASSWORD', '');
define('DB_DATABASE', 'test');

$connection = new mysqli(DB_SERVER, DB_USERNAME, DB_PASSWORD) or die(mysql_error());
$database = mysql_select_db(DB_DATABASE) or die(mysql_error());

$select=mysql_query("SELECT * FROM sample order by id desc");
$i=1;
while($userrow=mysql_fetch_array($select))

{
$id=$userrow['id'];
$username=$userrow['username'];
$usercity=$userrow['usercity'];
$useraddress=$userrow['useraddress'];
$usermail=$userrow['emailid'];
$usermobile=$userrow['mobileno'];
$created=$userrow['created']
?>
<div class="display" style="width:500px">
<!-------------------- User Name : --------------------------------->
<p id="User-Name" style="color:#999" onclick="showDiv();"> Name- <span style="color: #999"><?php echo $username; ?></span>
<span class="delete" title="Delete"> X </span></a>
</p>
<br />
<!--------------------- User City : ----------------------------------->
<p style="margin-left: 300px; margin-top: -45px; color:#999">City- <span style="color:#999"><?php echo $usercity; ?></span></p>
<br />

<div id="Entries" >
<!---------------------- User address : -------------------------------->
<p style="color:#999">Address- <span style="color:#999"><?php echo $useraddress; ?></span>

</p>
<br />
<!------------------ User Email Id : -------------------------------->
<p style="color:#999">Email- <span style="color:#999"><?php echo $usermail; ?></span>
<a href="edit.php?id=<?php echo $id; ?>"><span class="edit" title="Edit"> E </span></a>
</p>
<!--------------------- User Mobile : --------------------------------->
<br />
<p style="color:#999">Mobile- <span style="color:#999"><?php echo $usermobile; ?></span>
</p>
<!-------------------- User Created : ------------------------------->
<br />
<p style="color:#999"> <span style="color:#999"><?php echo $created; ?></span>
</p>
<br />
</div>
</div>

<?php } ?>

<script>
function showDiv()
{
document.getElementById('Entries').style.display = "block";
}
</script>

<style>
#Entries
{
display:none;
}
</style>

Answer

In a document id is unique , this means only one id can be provided, So change your <div id="Entries" > to <div class="Entries" > (while loop print the same div tag many times).

Now change your onclick event from <p> to <div> like this: <p style="color:#999" onclick="showDiv();"> change to <div class="display" onclick="showDiv(this);" style="width:500px;border:1px solid #eee;margin-bottom:2px;">(Then only you can select the 'div.Entries' which is inside div.display , not inside <p>)

Now change your css style tag at the bottom of your code from #Entriesto .Entries(because we changed in the div)

Just add the following code to your page

<script>
function showDiv(obj) 
{
    $('.Entries').css('display','none');
 var div = $(obj).find('.Entries').css('display','block');
}
</script>

The compleated code is below:

<html>
    <head>
        <script src="https://code.jquery.com/jquery-3.0.0.js" integrity="sha256-jrPLZ+8vDxt2FnE1zvZXCkCcebI/C8Dt5xyaQBjxQIo=" crossorigin="anonymous"></script>
    </head>
<body>
      <?php

      $database = array(
      'one' => array('name' => 'john' , 'city' => 'noida' , 'addr' => 'xyz','mail' => 'john@xyz.com'),
      'two' => array('name' => 'jimi' , 'city' => 'india' , 'addr' => 'abc','mail' => 'jimi@abc.com'),
      'three' => array('name' => 'foo' , 'city' => 'china' , 'addr' => 'pqr','mail' => 'foo@pqr.com'),
      'four' => array('name' => 'apple' , 'city' => 'america' , 'addr' => 'lmno','mail' => 'apple@lmno.com'),
      );

           foreach ($database as $row) {

            $username = $row['name'];
            $usercity = $row['city'];
            $useraddress = $row['addr'];
            $usermail = $row['mail'];

        echo    '<div class="display" onclick="showDiv(this);" style="width:500px;border:1px solid #eee;margin-bottom:2px;">
            <!-------------------- User Name : --------------------------------->
              <p style="color:#999"> Name- <span style="color: #999">'.$username.' ?></span>
              <span class="delete" title="Delete"> X </span></a>
              </p>
              <br />
            <!--------------------- User City : ----------------------------------->
              <p style="margin-left: 300px; margin-top: -45px; color:#999">City- <span style="color:#999">'.$usercity.'</span></p>
              <br />

              <div class="Entries" >
            <!---------------------- User address : -------------------------------->
              <p style="color:#999">Address-  <span style="color:#999">'.$useraddress.'</span>

              </p>
              <br />
            <!------------------ User Email Id : -------------------------------->  
              <p style="color:#999">Email-  <span style="color:#999">'.$usermail.'</span>
                <a href="edit.php?id=<?php echo $id; ?>"><span class="edit" title="Edit"> E </span></a>
              </p>
              <br />
              </div>
            </div>';
    }

      ?>

</body>
<script>
function showDiv(obj) 
{
    $('.Entries').css('display','none');
 var div = $(obj).find('.Entries').css('display','block');
}
</script>

<style>
.Entries
{
  display:none;
}
</style>
</html>