jQuery click function issue

Hello, I have this code as show below and it works exactly as intended apart from the fact that i have to click the page once before the buttons work.

I know this is caused by:

jQuery(document).click(function(){

but, when I try to replace this with anythiung else like:

jQuery(document).ready(function(){

for example, it no longer works. As far as i can remember the (document).click fucntion is there completely by accident and yet its needed for it to work properly, what am i missing?

jQuery(document).click(function(){
		jQuery('.toggle-on').click(function(){
				jQuery('.post-info').addClass("post-info-toggle-off");
				jQuery(this).addClass("toggle-off");
				jQuery(this).removeClass("toggle-on");

		});
		jQuery('.toggle-off').click(function(){
				jQuery('.post-info').removeClass("post-info-toggle-off");
				jQuery(this).addClass("toggle-on");
				jQuery(this).removeClass("toggle-off");
		});
		jQuery('.list-toggle').click(function(){
				jQuery('.post-text').hide();
				jQuery('.post-list').show();
				jQuery('.info-toggle').addClass("toggle-off");
				jQuery('.info-toggle').removeClass("toggle-on");
		});
		jQuery('.info-toggle').click(function(){
				jQuery('.post-text').show();
				jQuery('.post-list').hide();
				jQuery('.list-toggle').addClass("toggle-off");
				jQuery('.list-toggle').removeClass("toggle-on");
		});
	});