Improve my show hide divs function Jquery [closed]

Question

I'm new and I just made one of my first ugly function to show and hide. But I would like someone that actually knows about the subject to review it and show me a better way to do it.

Basically I'm making a small single page web that has four buttons, and from there you can go to all the sections, its really small content so I choose to switch between divs that are hidden. I'm reading about jquery and been using it lately just a tiny bit. I made a function that works how I want, but I'm sure it can be improved and as result ill learn more.

Thanks!!

Css:

#page1, #page2{
   display: none;
                 }

Jquery:

$(document).ready(function(){
 $("button.page1").click(function(){
  $("#main").hide();
  $("#page1").show();
 });
 $("button.page2").click(function(){
  $("#main").hide();
  $("#page2").show();
 });
 $("button.page3").click(function(){
   alert("Time flies, coming soon!!");
 });
 $("button.page4").click(function(){
   alert("I'm working on it, coming soon!!");
 });
 $("button.gobackfrompage1").click(function(){
  $("#main").show();
  $("#page1").hide();
 });
 $("button.gobackfrompage2).click(function(){
  $("#main").show();
  $("#page2").hide();
 });
});

Answer 1

You can condense this by adding a class to each button. Then in the jQuery you can bind a click event handler to the class and use the "this" keyword to execute the function on the specific HTML element.

Here's an example: Jquery select this + class