Раскрывающиеся по клику блоки div на js

Пример реализации раскрывающихся блоков на JS по клику на один из элементов внутри блока.

Задача - есть несколько блоков, один из которых - описание, он должен быть скрытым и раскрываться при нажатии. Вот такой вид блоки имеют изначально:

HTML

<div class="bloki">
	<div class="block">
		<a id="1" class="kplus"><span>+</span></a>
		<h3 class="name">Первый блок</h3>
		<div>Текст 1-1</div>
		<div>Текст 1-2</div>
		<div>Текст 1-3</div>
		<p class="text1" style="display: none;">Текст в раскрывающемся блоке</p>
	</div>
	<div class="block">
		<a id="2" class="kplus"><span>+</span></a>
		<h3 class="name line">Второй блок</h3>
		<div>Текст 2-1</div>
		<div>Текст 2-2</div>
		<div>Текст 2-3</div>
		<p class="text2" style="display: none;">Текст в раскрывающемся блоке</p>
	</div>
</div>

Здесь для каждой ссылки (+) присвоен свой уникальный ID, тот же айди добавлен к классу тега <p>, т.е. если тег <a> будет присвоен id="123", то тегу <p>, который и станет скрытым блоком, будет присвоен class="text123".

Для скрытого блока так же добавлено свойство display:none

CSS

.bloki .block {
   background: #e7e7e7;
	padding: 2px 1%;
	margin-bottom: 5px;
	min-height: 30px;
}
.bloki .block > div, .bloki .block h3, .bloki .block a {
	float: left;
	min-width: 18%;
	margin: 0px;
	font-weight: normal;
	font-size: 1em;
	padding: 5px;
	margin-left: 0.5%;
	text-align: center;
}
.bloki .block a.kplus {min-width:10%;}
.bloki .block a.kplus span {
	background: #fa5205;
	border-radius: 10px;
	width: 25px;
	height: 25px;
	display: block;
	font-size: 20px;
	line-height: 25px;
	cursor:pointer;
	color: #fff;
}
.bloki .block p {
	clear:both;
	margin: 0px;
	padding: 10px;
	background:#fff;
}

Блоки сильно не оформлял, только что бы показать - что примерно должно получиться в итоге.

Java Script

<script>
	jQuery(document).ready(function(){
		$('.kplus').on('click', function() {
			var theClass = $(this).attr('id');
			if ($('.text'+theClass).css('display') == 'none') {
				$('.text'+theClass).animate({height: 'show'}, 500);
				$('#'+theClass+'.kplus').addClass('viz');
				$('#'+theClass+'.kplus span').replaceWith('<span>-</span>');
			} else {
				$('.text'+theClass).animate({height: 'hide'}, 100); 
				$('#'+theClass+'.kplus').removeClass('viz');
				$('#'+theClass+'.kplus span').replaceWith('<span>+</span>');
			}
		});
	});
</script>

Здесь вначале определяем ID текущей кнопки (тег a), затем проверяем наличие свойства "display:none" у блока с классом textID, где ID - айди кнопки. Если такое свойство есть - показываем блок (show), так же добавляем класс "viz" для кнопки и меняем "+" на "-". Теперь немного дополню CSS т.к. есть возможность выделить кнопку, когда блок показан

Дополнение к CSS

.bloki .block a.viz span {
	background: #b1250c;
}

Результат