-1

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();
 });
});
exe
  • 29
  • 6
  • Use a custom function: `function show(sel) { ... }`. Inside this function you first hide all pages. This works best if you give all of them a `page` class. Then you can call `$('.page').hide()` to hide all of them. Next you call `$(sel).show()`, using the parameter you passed. Now all you need to do in your click handler is call the function: `show('#main')` –  May 03 '22 at 20:14
  • Thank you Chris G, I see what you mean. Ill go that way, add one class to hide them all. Ok then show the one selected, nice. – exe May 03 '22 at 20:19

1 Answers1

2

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

Sean
  • 1,368
  • 2
  • 9
  • 21