Hallo ik ben bezig met een api om data ophalen nu wil ik als je op de button klikt dat er een slide down
de data wordt laten zien. ik kom er niet uit iemand die me kunt helpen ?


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery slideToggle Effect</title>
<style>
    .box{
        width: 400px;
        background: #f0e68c;
        border: 1px solid #a29415;
    }
    .box-inner{
        padding: 10px;
    }
</style>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
    $(document).ready(function(){
        $(".slide-toggle").click(function(){
            $(".box").slideToggle();
        });
    });
</script>
</head>
<body>
<?php

$IP = $_SERVER['REMOTE_ADDR'];
$ip = htmlentities($_GET["ip"]);
$hostname = gethostbyaddr($_GET['ip']);

$latitude = htmlentities($_POST['latitude'], ENT_QUOTES, 'UTF-8');
$longitude = htmlentities($_POST['longitude'], ENT_QUOTES, 'UTF-8');
$city = htmlentities($_POST['city'], ENT_QUOTES, 'UTF-8');

// ipapi.com provide api too

// old API without login from: http://freegeoip.net
// https://github.com/apilayer/freegeoip
// $location = json_decode(file_get_contents('http://freegeoip.net/json/'.$ip));

// with new API with login from: http://ipstack.com (www.freegeoip.net) | LogIn there to get your own access key... It's free
// the limit is: 10000 requests on month...
// read documentation: https://ipstack.com/documentation
$location = json_decode(file_get_contents('http://api.ipstack.com/'.$ip.'?access_key=Your-API-Key-here&format=1'));
// with Api from www.ipinfo.io without apikey
$details = json_decode(file_get_contents("http://ipinfo.io/{$ip}/json"));
// API from ip-api.com without access key
$more = json_decode(file_get_contents("http://ip-api.com/json/{$ip}?fields=status,message,continent,continentCode,country,countryCode,region,regionName,city,district,zip,lat,lon,timezone,currency,isp,org,as,asname,reverse,mobile,proxy,query"));

if(isset($_GET['ip']))
{
echo '<form method="get" action="">
<input type="text" name="ip" id="ip" maxlength="15" placeholder="IP" title="Enter IP Address here" />
<input type="submit" class="button" value="Lookup IP Address" />
</form>';  
echo "<br><br><b>Short View</b><br>";
echo "<b>IP: </b>" .$details->ip;
echo "<br><b>Country code: </b>" .$details->country;
echo "<br><b>City: </b>" .$details->city;
echo "<br><b>Region: </b>" .$details->region;
echo "<br><b>Postal: </b>" .$details->postal;
echo "<br><b>Hostname: </b>" .$details->hostname;
echo "<br><b>Organization: </b>" .$details->org;
echo "<br><b>Location: </b>" .$details->loc;

echo <<<HTML
<br><br><b>Geolocation Map</b>
<form action="" method="post">
<input type="text" name="city" value="$location->city" />
<input type="submit" class="button" value="Show City on the Map" />
</form>
HTML;

if(isset($_POST['city'])){
// echo "<iframe src='https://google-developers.appspot.com/maps/documentation/utils/geocoder/#q%3D{$city}' width='100%' height='900' FRAMEBORDER=NO FRAMESPACING=0 BORDER=0 ></iframe>";
// echo "<iframe src='https://developers-dot-devsite-v2-prod.appspot.com/maps/documentation/utils/geocoder?hl=pt-br#q%3D{$city}' width='100%' height='900' FRAMEBORDER=NO FRAMESPACING=0 BORDER=0 ></iframe>";
echo "<iframe src='https://developers-dot-devsite-v2-prod.appspot.com/maps/documentation/utils/geocoder/#q%3D{$city}' width='100%' height='900' FRAMEBORDER=NO FRAMESPACING=0 BORDER=0 ></iframe>";
}

echo <<<HTML
<br><b>Map Latitude Longitude</b>
<form action="" method="post">
<input type="text" name="address" value="$location->latitude" placeholder="latitude" title="Latitude" /><input type="text" name="address" value="$location->longitude" placeholder="longitude" title="Longitude" />
</form>
HTML;

// echo "<iframe src='https://google-developers.appspot.com/maps/documentation/utils/geocoder/#q%3D{$location->latitude}%2520{$location->longitude}' width='100%' height='900' FRAMEBORDER=NO FRAMESPACING=0 BORDER=0 ></iframe><br>";
// echo "<iframe src='https://developers-dot-devsite-v2-prod.appspot.com/maps/documentation/utils/geocoder?hl=pt-br#q%3D{$location->latitude}%2520{$location->longitude}' width='100%' height='900' FRAMEBORDER=NO FRAMESPACING=0 BORDER=0 ></iframe><br>";
echo "<iframe src='https://developers-dot-devsite-v2-prod.appspot.com/maps/documentation/utils/geocoder/#q%3D{$location->latitude}%2520{$location->longitude}' width='100%' height='900' FRAMEBORDER=NO FRAMESPACING=0 BORDER=0 ></iframe><br>";
}

else {

print ('<form method="get" action="">
<input type="text" name="ip" id="ip" maxlength="15" placeholder="IP" title="Enter IP Address here" value="'.$IP.'" />
 <button type="button" class="slide-toggle">Slide Toggle</button>
<input type="submit" class="slide-toggle" value="Lookup IP Address" />
</form>');
echo "<div class="box">
        <div class="box-inner"></div>
    </div>";
}

?>
</body>
</html>
Heb je al een test-voorbeeld op JS-fiddle gemaakt?

Reageren