Basic jQuery hide/show code

Question

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

Answer 1

1) Add another common class (using toggle in the example) to all of your tags

<div class="toggle home">data</div>
<div class="toggle headr">data</div>
<div class="toggle about">data</div>
<div class="toggle skills">data</div>
<div class="toggle experience">data</div>
<div class="toggle education">data</div>
<div class="toggle examples">data</div>

2) on your click handler add data tags (using data-show in this example) for what you want to show

<button data-show="home">home</button>
<button data-show="headr">header</button>
<button data-show="about">about</button>
<button data-show="skills">skills</button>
<button data-show="experience">experience</button>
<button data-show="education">education</button>
<button data-show="examples">examples</button>

3) Set up one function to handle all clicks

$('button').click(function(event) {
  $('.toggle').hide();
  $('.' + event.currentTarget.data.show).show();
  console.log(event.currentTarget.data.show + ' clicked');
});

Answer 2

A sugestion I can give to you is to cache your DOM elements like this:

var about = $('#about');
var home = $('.home'):

ecc.. Using this way you can have a code more readable

about.click(function(){
  home.hide();
  ecc..
  console.log("about clicked");
});

Another suggestion as mentioned in the above answer is to create a class that you can add to the elements you need to hide.

<button class=".hidden">home</button>
<button class=".visible">about</button>

.hidden{
 display: none;
}

.visible{
 display: block;
}

home.on('click', function(e){
  about.toggleClass('hidden');
});