John120 John120 - 4 months ago 8
HTML Question

How to hide title "City" when click on that div in php page?

I am trying to hide the title, "City", when someone clicks on a div. For ex. if a click on Victoria div, then title, "City", is hidden for that div only, other divs remain unaffected. If you click on Toronto div, its title "City" is hidden and title of Victoria div is shown. It's similar to my previous question, "How to use same onclick function multiple times in php page?", but it won't work here. Any solution with javascript, Jquery?

enter image description here

Php Code :

<?php
$link = mysqli_connect("localhost", "root", "", "test");
// Check connection
if($link === false)
{
die("ERROR: Could not connect. " . mysqli_connect_error());
}
// Attempt select query execution
$sql = "SELECT * FROM sample";
if($result = mysqli_query($link, $sql))
{
if(mysqli_num_rows($result) > 0)
{

while($row = mysqli_fetch_array($result))
{
echo "<div style='border: 2px solid black;'><p class='CityTitle".$row['id']."'>City</p>". $row['UserCity'] ."</p></div></br>";
}
// Close result set
mysqli_free_result($result);
}
else
{
echo "No records matching your query were found.";
}
}
else
{
echo "ERROR: Could not able to execute $sql. " . mysqli_error($link);
}
// Close connection
mysqli_close($link);
?>

Answer

Do you want following behavior:

$(document).ready(function() {
  $(".cityContainer > div").click(function() {
    $(".cityContainer").find(".active").removeClass("active");
    $(this).addClass("active");
  });
});
.active .CityTitle {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="cityContainer">

  <div style='border: 2px solid black;'>
    <p class='CityTitle'>City</p>Victoria</div>
  </br>

  <div style='border: 2px solid black;'>
    <p class='CityTitle'>City</p>Toronto</div>
  </br>

 <div style='border: 2px solid black;'>
    <p class='CityTitle'>City</p>Ottawa</div>
  </br>

</div>

Comments