My JQuery code needs condensing. Help!

JavaScript
1

I know this is very simple stuff but I’m a noob in need of some instruction on this one.

$("#about").click(function(){
  $( ".home" ).hide();
  $( ".headr" ).show();
  $( ".about" ).show();
  $( ".skills" ).hide();
  $( ".experience" ).hide();
  $( ".education" ).hide();
  $( ".examples" ).hide();
  console.log("about clicked");
});

$("#skills").click(function(){
  $( ".home" ).hide();
  $( ".headr" ).show();
  $( ".about" ).hide();
  $( ".skills" ).show();
  $( ".experience" ).hide();
  $( ".education" ).hide();
  $( ".examples" ).hide();
  console.log("skills clicked");
});

$("#experience").click(function(){
  $( ".home" ).hide();
  $( ".headr" ).show();
  $( ".about" ).hide();
  $( ".skills" ).hide();
  $( ".experience" ).show();
  $( ".education" ).hide();
  $( ".examples" ).hide();
  console.log("experience clicked");
});

$("#education").click(function(){
  $( ".home" ).hide();
  $( ".headr" ).show();
  $( ".about" ).hide();
  $( ".skills" ).hide();
  $( ".experience" ).hide();
  $( ".education" ).show();
  $( ".examples" ).hide();
  console.log("education clicked");
});

$("#examples").click(function(){
  $( ".home" ).hide();
  $( ".headr" ).show();
  $( ".about" ).hide();
  $( ".skills" ).hide();
  $( ".experience" ).hide();
  $( ".education" ).hide();
  $( ".examples" ).show();
  console.log("examples clicked");
});
2

Create a separate function that will be handling those sections, and call it from the start of each function:

function showSection(name) {
}
$("#about").click(function(){
  showSection("about");
  $( ".home" ).hide();
});
...

and move in there all of the things that are common to all the other functions:

function showSection(name) {
  $( ".home" ).hide();
  $( ".headr" ).show();
}
$("#about").click(function(){
  // $( ".home" ).hide();
  // $( ".headr" ).show();
  $( ".about" ).show();
  $( ".skills" ).hide();
  $( ".experience" ).hide();
  $( ".education" ).hide();
  $( ".examples" ).hide();
  console.log("about clicked");
});

The console.log can be moved in there too, by using the name parameter:

function showSection(name) {
  $( ".home" ).hide();
  $( ".headr" ).show();
  console.log(name + " clicked");
}
$("#about").click(function(){
  ...
  // console.log("about clicked");
});

The rest of the click function is where most of them are hidden, and one thing is shown.
The best solution there is to hide all of them, and then afterwards show something.

function showSection(name) {
  $( ".home" ).hide();
  $( ".headr" ).show();
  $( ".about" ).hide();
  $( ".skills" ).hide();
  $( ".experience" ).hide();
  $( ".education" ).hide();
  $( ".examples" ).hide();
  console.log(name + " clicked");
}
$("#about").click(function(){
  $( ".about" ).show();
  // $( ".skills" ).hide();
  // $( ".experience" ).hide();
  // $( ".education" ).hide();
  // $( ".examples" ).hide();
});

That leaves us with the following code:

function showSection(name) {
  $( ".home" ).hide();
  $( ".headr" ).show();
  $( ".about" ).hide();
  $( ".skills" ).hide();
  $( ".experience" ).hide();
  $( ".education" ).hide();
  $( ".examples" ).hide();
  console.log(name + " clicked");
}
$("#about").click(function(){
  showSection("about");
  $( ".about" ).show();
});
$("#skills").click(function(){
  showSection("skills");
  $( ".skills" ).show();
});
$("#experience").click(function(){
  showSection("experience");
  $( ".experience" ).show();
});
$("#education").click(function(){
  showSection("education");
  $( ".education" ).show();
});
$("#examples").click(function(){
  showSection("examples");
  $( ".examples" ).show();
});

We can deal with that show statement by using the name parameter too.

function showSection(name) {
  ...
  $( ".examples" ).hide();
  $( "." + name ).show();
  console.log(name + " clicked");
}

And now, each click function is nice and simple:

$("#about").click(function(){
  showSection("about");
});
$("#skills").click(function(){
  showSection("skills");
});
$("#experience").click(function(){
  showSection("experience");
});
$("#education").click(function(){
  showSection("education");
});
$("#examples").click(function(){
  showSection("examples");
});

So simple, that we can now put those names in an array:

function showSection(name) {
  ...
}
var names = ["about", "skills", "experience", "education", "examples"];
names.forEach(function (name) {
  $("#" + name).click(function(){
    showSection(name);
  });
});

and remove those hide statements from the showSection function.

function showSection(name) {
  $( ".home" ).hide();
  $( ".headr" ).show();
  // $( ".about" ).hide();
  // $( ".skills" ).hide();
  // $( ".experience" ).hide();
  // $( ".education" ).hide();
  // $( ".examples" ).hide();
  $( "." + name ).show();
  console.log(name + " clicked");
}
var names = ["about", "skills", "experience", "education", "examples"];
names.forEach(function (name) {
  $("#" + name).click(function(){
    names.forEach(function (toHide) {
      $("." + toHide).hide();
    });
  ...
});

and extract the remaining contents of the showSection function, back into the click event.

// function showSection(name) {
  // $( ".home" ).hide();
  // $( ".headr" ).show();
  // $( "." + name ).show();
  // console.log(name + " clicked");
// }
var names = ["about", "skills", "experience", "education", "examples"];
names.forEach(function (name) {
  $("#" + name).click(function(){
    $( ".home" ).hide();
    $( ".headr" ).show();

    names.forEach(function (toHide) {
      $("." + toHide).hide();
    });
    $( "." + name ).show();
    console.log(name + " clicked");
});
4 Likes
3

This is exactly what I was looking for. Very dry. Much appreciated.

4

for a little more condensation, define an overarching class, and define the function as

$(".overarchtrigger").click(function() {
   $(".overarch").hide();
   $("."+$(this).attr("id")).show();
}

(Also i’m not sure if you’re using class names badly with this; is there more than one element with the class “about”?)

1 Like
5

There is a “.about” div and a “#about” div.

6

The class name is for the menu button, and the identifier is for that appropriate section on the page.

7

(other way around, but yeah)

The pedant in me says that you should have an ID for both - something like #about and #aboutsection, but a class with a single member is still valid :slight_smile:

1 Like
8

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.