Basic jQuery hide/show code 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");
});
1) Add another common class (using toggle in the example) to all of your tags

&lt;div class="toggle home"&gt;data&lt;/div&gt;
&lt;div class="toggle headr"&gt;data&lt;/div&gt;
&lt;div class="toggle about"&gt;data&lt;/div&gt;
&lt;div class="toggle skills"&gt;data&lt;/div&gt;
&lt;div class="toggle experience"&gt;data&lt;/div&gt;
&lt;div class="toggle education"&gt;data&lt;/div&gt;
&lt;div class="toggle examples"&gt;data&lt;/div&gt;


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

&lt;button data-show="home"&gt;home&lt;/button&gt;
&lt;button data-show="headr"&gt;header&lt;/button&gt;
&lt;button data-show="about"&gt;about&lt;/button&gt;
&lt;button data-show="skills"&gt;skills&lt;/button&gt;
&lt;button data-show="experience"&gt;experience&lt;/button&gt;
&lt;button data-show="education"&gt;education&lt;/button&gt;
&lt;button data-show="examples"&gt;examples&lt;/button&gt;


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