There are 3 hidden DIVs on a webpage. Clicking on a heading should display one DIV while hiding the other 2. Below is the code I used to achieve this, but it doesn't work properly on all browsers like iPad and iPhone. Is there a more efficient way to achieve the same result?
<html xmlns="http://www.w3.org/1999/xhtml">
<script type="text/javascript" Src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<head runat="server">
<style>
.div1, .div2, .div3 { display:none; }
</style>
<script>
$(window).load(function () {
$(".bt1").click(function () {
$(".div1").css("display", "block");
$('[class^="div"]:not(.div1').css("display", "none");
});
$(".bt2").click(function () {
$(".div2").css("display", "block");
$('[class^="div"]:not(.div2').css("display", "none");
});
$(".bt3").click(function () {
$(".div3").css("display", "block");
$('[class^="div"]:not(.div3').css("display", "none");
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div id="divID1" class="bt1">bt1</div>
<div id="divID2" class="bt2">bt2</div>
<div id="divID3" class="bt3">bt3</div>
<br />
<div id="id1" class="div1">Content1</div>
<div id="id2" class="div2">Content2</div>
<div id="id3" class="div3">Content3</div>
</form>