You should add a jsfiddle to your code. Then we can better debug it for you. You have 2 problems in your code. (Edit: I apologize I didn't know that article was a HTML5 tag. Tech moves fast.)
Problem 1: .show(); of a child element reveals the entire parent element
$("#article").hide();
var zichtbaar = $("#article").first();
zichtbaar.show(); //when a child element is shown, the parent element is shown as well
Fiddle.
You .show();-ing your .first(); #article element is essentially revealing the parent element #article (hence revealing the rest of the child elements). What you could do is hide the child elements instead like this:
$(document).ready(function(){
$("#articleholder article:not(#1)").hide(); //smart CSS
//other codes below
});
Problem 2: Your function is undefined because of JavaScript hoisting
var toon = function(artikel) {
zichtbaar.hide();
zichtbaar = artikel; //all var declarations within functions like these hoist
zichtbaar.show();
};
Your code above won't work because of javascript hoisting.
Due to hoisting, JavaScript engines will render your function as:
var toon = function(artikel) {
var zichtbaar; //all variables in functions are hoisted to the top and declared like this
zichtbaar.hide(); //at this point, zichtbaar is undefined. Hence the debugger says your function is undefined.
zichtbaar = artikel; //all var declarations within functions like these hoist
zichtbaar.show();
}
So instead you could do this:
$(document).ready(function(){
$("#articleholder article:not(#1)").hide(); //smart CSS
var toon = function(artikel) {
$("#articleholder article").hide(); //we will hide everything so that future clicks will work as well
artikel.show(); //greatly simplified.
};
$("#menu a").click(function(event){
var ref = $(this).attr('href');
toon($(ref)); //just plug in the jQuery object as the argument
});
});
Here is your complete solution: Working fiddle.