Блок не скрывается
 

Уважаемые подскажите, есть вот такая конструкция

jQuery(document).ready(function ($) {
		var join = $('.join-space'),
			joinLink = $('.join a'),
			indexClick = 0;
	$ ( function() {
		joinLink.click( function(event) {
			if (indexClick === 0) {
				join.fadeIn(300);
				join.addClass('active')
				indexClick = 1;
			}
			else {
				join.fadeOut(300);
				indexClick = 0;
			}
			event.stopPropagation();
		});
	});
	$(document).click(function(event) {
		if ($(event.target).closest(".join-space").length) return;
				join.fadeOut(300);
				indexClick = 0;
		event.stopPropagation();
	});
	});

Показывает и скрывает блок, потребовалось чтобы рядом еще была ссылка которая открывал и скрывал второй блок, как доработать этот скрипт?

Я попробовал просто поменять классы

jQuery(document).ready(function ($) {
		var join = $('.join-space1'),
			joinLink = $('.join1 a'),
			indexClick = 0;
	$ ( function() {
		joinLink.click( function(event) {
			if (indexClick === 0) {
				join.fadeIn(300);
				join.addClass('active')
				indexClick = 1;
			}
			else {
				join.fadeOut(300);
				indexClick = 0;
			}
			event.stopPropagation();
		});
	});
	$(document).click(function(event) {
		if ($(event.target).closest(".join-space1").length) return;
				join.fadeOut(300);
				indexClick = 0;
		event.stopPropagation();
	});
	});

Работает, но когда первый блок открыт и нажать на открытие второго блока, первый не скрывается, а открывается поверх.. а должен скрываться, когда второй открывается и на оборот.

Спасибо за ответ.

venjihook,
на форуме поиск открывашка