JSFiddle - React, Tailwind, and code Playground
HTML
<div class="iDevice">iPhone/iPad</div>
<div class="android-device">Android</div>
<div class="desktop">Desktop</div>
JavaScript
$("#email").hide();
$(".desktop").hide();
$(".iDevice").hide();
$(".android-device").hide();
$('#checkbox').change(function () {
$('#email').slideToggle();
});
if((navigator.platform === 'iPhone') || (navigator.platform === 'iPad')){
alert("iDevice");
$(".iDevice").show();
$(".android-view").hide();
$(".desktop").hide();
}
var ua = navigator.userAgent.toLowerCase();
var isAndroid = ua.indexOf("android") > -1; //&& ua.indexOf("mobile");
if(isAndroid) {
alert("Android");
$(".iDevice").hide();
$(".android-view").show();
$(".desktop").hide();
}
else if ((navigator.platform != 'iPhone') || (navigator.platform != 'iPad' ) || (isAndroid === false)){
alert("Desktop");
$(".desktop").show();
$(".iDevice").hide();
$(".android-view").hide();
}