CODEWITHSUNDEEP
javascriptphpjqueryhtmlcss
John120
John120

Reputation: 181

How to open close div with transition effect in php page?

I want to add some transition like slidedown, fadein using jquery. when someone clicks on a title city. it opens with effect. I am trying it with jquery but it won't work. Any solution that where i am wrong or solution with css ?

Java Script Code :

<head>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
//------------------- Jq used to show/open single div when click on title link -----------
function showDiv(obj) 
{
  $('.CityDivInner').css('display','block');
  var div = $(obj).find('.CityDivInner').css('display','none');
}
</script>
<script> 
$(document).ready(function(){
$(".CityDivOuter").click(function(){
    $(".CityDivInner").slideDown("slow");
});
});
</script>

Css Code :

<style>
.CityDivInner
{
 display:none;
}
</style>
</head>

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)
   {
    echo "<div class='cityContainer'>";
    while($row = mysqli_fetch_array($result))
    {
       echo "<div class='cityContainerInner' style='border: 2px solid black;' >
        <p class='CityDivOuter' onclick='showDiv(this);'>City</p>
        <div class='CityDivInner' style='border: 1px solid black;'>
        <p class='CityTitle'>". $row['UserCity'] ."</p>
        </div>
        </div></br>";
    }
    echo "</div>";
    // 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);
 ?>

 </body>

Div Close Div Open

Upvotes: 1

Views: 299

Answers (1)

Hitesh Misro
Hitesh Misro

Reputation: 3461

Check this code, This might help you!

$(document).ready(function(){
$('.expand').hide();
$(".expand, .collapse").click(function(){
    $(".CityDivInner").slideToggle("slow");
    $('.expand').toggle();
    $('.collapse').toggle();
});
});
.CityDivInner{
  width:300px;
  height:100px;
  background:#888;
}
.expand, .collapse{
  margin:5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="CityDivInner"></div>
<button class="expand">Expand</button>
<button class="collapse">Collpase</button>

Upvotes: 1

Related Questions