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

• Marc Rohloff: You probably want to use event.currentTarget.dataor this.data` instead of event.data.

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