Newbie need suggestion on mulitple content show and hide
Dear all, I am new to jquery. I am writing a single page to show multiple page content (and pretend there are multiple page.
Assume we have 3 pages content (in the real project I have 20 pages!) I have created 3 buttons and 3 div and write 3 functions like follow:
- <script type="text/javascript">
$(document).ready(function(e) {
$("#content1").hide();
$("#content2").hide();
$("#content3").hide();
$("#btn1").bind("click", function() {
$("#content1").hide();
$("#content2").hide();
$("#content3").hide();
$("#content1").show();
});
$("#btn2").bind("click", function() {
$("#content1").hide();
$("#content2").hide();
$("#content3").hide();
$("#content2").show();
});
$("#btn3").bind("click", function() {
$("#content1").hide();
$("#content2").hide();
$("#content3").hide();
$("#content3").show();
});
});
</script>
How can I make use of Jquery to avoid repeating button and functions? Thanks.