Element inside a website I'm finally "done" with my small prototype for an element inside my website. I'm just a learner in the jQuery code and that reflects in my code. It's bloated, a lot of functions do the same thing, but for a red or green button which results in this kind of code.

$('.submenu').on('click','.rood',function() {
    $(this).closest('.container_vragen').fadeOut(400, function() {
        $(this).closest('.container_vragen').css({overflow : 'hidden', color : 'red'});
        $(this).closest('.container_vragen').appendTo("#niet_geregeld");
        $(this).closest('.container_vragen').fadeIn(400);
    });
});

$('.submenu').on('click','.groen',function() {
    $(this).closest('.container_vragen').fadeOut(400, function() {
        $(this).closest('.container_vragen').css({overflow : 'hidden', color : 'green'});
        $(this).closest('.container_vragen').appendTo("#geregeld");
        $(this).closest('.container_vragen').fadeIn(400);
    });
});


As you can see most of the functions are the same, only the color and the .appedTo id changes. What's the best way to merge this code? I'm thinking there needs to be an if statement which filters what button is clicked. But I can't figure it out on my own.
Make a function.

function doStuff(obj, c) {
  obj.css({overflow: 'hidden', color: c}).fadeIn(400);
}


Then call it

$('#submenu').click(function () {
  doStuff($('#geregeld'), 'green');
});


(simplified example) 

Feel free to mess around: http://jsfiddle.net/rQFHt/