Skip to main content
1 of 2

My code is a basic JQuery hide/show. How can I condense it? DRY

My code works perfectly but it is redundant. How does one condense this? How do you use the =! operator? Any help would be greatly appreciated.

$("#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");
});