Bölge il ilçe seçimi
Turizm ile ilgili bir blog yapmaya çalışıyorum. Türkiye diye bir menü başlığı olacak. 3 menü başlığım var biri bu. Türkiye ye tıklanınca bölgeler açılacak. bir bölgeye tıklayınca da iller açılacak, bir ile tıklayınca o ilin ilçeleri açılacak. ilçeye tıklayınca o ilçenin tanıtımıya ilgili yazdığım yazılar çıkacak. php ve jqury kullanarak yapmak istiyorum yardım edebilecek varsa sevinirim
{
"Türkiye": {
"Marmara Bölgesi": {
"İstanbul": {
"Beyoğlu": "Beyoğlu..."
},
"Bursa": {
"Osmangazi": "Osmangazi..."
}
},
"Ege Bölgesi": {
"İzmir": {
"Konak": "Konak..."
},
"Aydın": {
"Efeler": "Efeler..."
}
}
}
}
<?php
$json_data = file_get_contents("veri.json");
$data = json_decode($json_data, true);
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Türkiye Turizm Menüsü</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<div id="turkiye-menu">
<?php foreach ($data["Türkiye"] as $bolge => $iller): ?>
<div class="bolge">
<h3><?php echo $bolge; ?></h3>
<ul class="iller">
<?php foreach ($iller as $il => $ilceler): ?>
<li>
<?php echo $il; ?>
<ul class="ilceler">
<?php foreach ($ilceler as $ilce => $yazi): ?>
<li><?php echo $ilce; ?></li>
<?php endforeach; ?>
</ul>
</li>
<?php endforeach; ?>
</ul>
</div>
<?php endforeach; ?>
</div>
<script>
$(document).ready(function(){
$(".bolge").hide();
$(".bolge:first").show();
$(".bolge h3").click(function(){
$(this).next(".iller").slideToggle();
});
$(".iller li").click(function(){
$(this).children(".ilceler").slideToggle();
});
});
</script>
</body>
</html>