$(function() {

	var counter = 1;

	$.fn.collapsible = function(config) {

		var config = $.extend({
			buttonClass: {
				collapsed: "collapsed",
				expanded: "expanded"
			},
			buttonText: {
				collapsed: "toon",
				expanded: "verberg"
			},
			counterPrefix: "button"
		}, config);

		return this.each(function(i, collapsible) {
			var button = $("<button></button>").attr({
				"class": config.buttonClass.collapsed,
				"id": config.counterPrefix + counter
			}).text(config.buttonText.collapsed).toggle(function(e) {
				eval(config.target).show();
				$(this).removeClass(config.buttonClass.collapsed).addClass(config.buttonClass.expanded).text(config.buttonText.expanded);
				e.preventDefault();
			}, function(e) {
				eval(config.target).hide();
				$(this).removeClass(config.buttonClass.expanded).addClass(config.buttonClass.collapsed).text(config.buttonText.collapsed);
				e.preventDefault();
			});
			$(this).wrapInner("<label for='" + config.counterPrefix + counter + "'></label>").append(button);
			counter++;
		});

	};

});