Question

I was just wondering how i can make this code into one function instead of rewriting it 6 times like i have below. I am horrible with this stuff. I am sure there is a way to do it i just have no idea. Any help would be great.

    (function() {
    $('.one').click(function() {
      $('.glennpage').show();
      $('.emmapage').hide();
      $('.brodiepage').hide();
      $('.laurenpage').hide();
      $('.mattpage').hide();
      $('.jeremypage').hide();
    });
  });
$(function() {
    $('.two').click(function() {
      $('.glennpage').hide();
      $('.emmapage').show();
      $('.brodiepage').hide();
      $('.laurenpage').hide();
      $('.mattpage').hide();
      $('.jeremypage').hide();
    });
});
$(function() {
    $('.three').click(function() {
      $('.glennpage').hide();
      $('.emmapage').hide();
      $('.brodiepage').show();
      $('.laurenpage').hide();
      $('.mattpage').hide();
      $('.jeremypage').hide();
    });
});
$(function() {
    $('.four').click(function() {
      $('.glennpage').hide();
      $('.emmapage').hide();
      $('.brodiepage').hide();
      $('.laurenpage').show();
      $('.mattpage').hide();
      $('.jeremypage').hide();
    });
});
$(function() {
    $('.five').click(function() {
      $('.glennpage').hide();
      $('.emmapage').hide();
      $('.brodiepage').hide();
      $('.laurenpage').hide();
      $('.mattpage').show();
      $('.jeremypage').hide();
    });
});
$(function() {
    $('.six').click(function() {
      $('.glennpage').hide();
      $('.emmapage').hide();
      $('.brodiepage').hide();
      $('.laurenpage').hide();
      $('.mattpage').hide();
      $('.jeremypage').show();
    });
});

Answer 1

First off you have multiple document.ready functions,
which can be combined into one.

$(function() {
    $('.one').click(function() {

    });
    $('.two').click(function() {

    });
    $('.three').click(function() {

    });
    etc...
});

then as @Shivan Raptor mentions you can move show/hide code into one function.
But the problem with @Shivan Raptor’s code function is that it is just
hiding all your selected elements, which doesn’t seem to be what you are
trying to do.
Based on what you’ve got it looks like your are trying to do something like a set of tabs,
where clicking on one shows a certain tab section, and hide all the others. Clicking the next tab shows its corresponding tab section, and hides all the others, etc…

If that’s what you are going for I would suggest adding an ID to each of your html elements. So instead of doing this:

<div class='glennpage'></div>
<div class='emmapage'></div>
<div class='brodiepage'></div>
etc...

do this: and add a class so you can easily select them all at once

<div id='glennpage' class="tabContent"></div>
<div id='emmapage' class="tabContent"></div>
<div id='brodiepage' class="tabContent"></div>
etc...

then instead of using .one, .two, .three, etc.. on your button elements (or whatever element your triggers are), use a class that matches one of the id’s on one of your tabContent sections:

<button class="glennpage"></button>
<button class="emmapage"></button>
<button class="brodiepage"></button>
etc...

now we can rewrite your jquery to something like this:

$('.one','.two','.three','.four','.five','.six').click(function() {
    $('.tabContent').hide();
    $(this).find('#' + $(this).attr('id')).show();
});

now when you click on one of the buttons, the jquery will hide all elements with a class of .tabContent, which is all your sections, then it will look for an element with the corresponding id and show that one.
hope that helps!