Berikut ini HTML lengkap kodenya
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'/>
<meta content='width=device-width, initial-scale=1' name='viewport'/>
<title>Contoh Menyembunyikan ID dan Menampilkan Kelas</title>
<style>
.mobile-only {
display: none;
}
.desktop-only {
display: block;
}
</style>
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/UAParser.js/1.0.33/ua-parser.min.js"></script>
<script>
function hideIdAndShowClass() {
const ua = UAParser(navigator.userAgent);
const isAndroid = ua.os.name === 'Android';
const isiPhone = ua.os.name === 'iOS';
if (isAndroid || isiPhone) {
fetch('https://ipapi.co/json/')
.then(response => response.json())
.then(data => {
const country = data.country.toLowerCase();
if (country === 'id') {
const elemToHide = document.getElementById('element-to-hide');
if (elemToHide) {
elemToHide.style.display = 'none';
}
const elemsToShow = document.querySelectorAll('.mobile-only');
if (elemsToShow) {
elemsToShow.forEach(elem => {
elem.style.display = 'block';
});
}
const elemsToHide = document.querySelectorAll('.desktop-only');
if (elemsToHide) {
elemsToHide.forEach(elem => {
elem.style.display = 'none';
});
}
}
})
.catch(error => console.error(error));
}
}
hideIdAndShowClass();
</script>
<div id="element-to-hide">
<h1>Selamat datang di situs web kami!</h1>
<p>Elemen ini akan disembunyikan jika pengguna mengakses situs web dari perangkat Android atau iPhone dan alamat IP mereka berasal dari Indonesia.</p>
</div>
<div class="mobile-only">
<p>Elemen ini hanya akan ditampilkan jika pengguna mengakses situs web dari perangkat Android atau iPhone dan alamat IP mereka berasal dari Indonesia.</p>
</div>
<div class="desktop-only">
<p>Elemen ini hanya akan ditampilkan jika pengguna mengakses situs web dari desktop atau perangkat selain Android/iPhone atau alamat IP mereka bukan dari Indonesia.</p>
</div>
</body>
</html>