Basic jQuery hide/show code
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');
});