Помогите с jquery

Всем добра. Не дружу я с jquery. Все с трудом дается, но на примерах в сети вроде пока что-то и делаю.

Но тут никак не могу сделать.

Есть текст который показывается не полностью. Нужно по клику показать блок полностью. И также по клику вернуть в исходное положение.

<style>

.text

{

	border:1px solid #000;

	width:500px;

	height:50px;

	overflow:hidden;

	position:relative;

}

.knopka

{

	border:1px solid #000;

	position:absolute;

	background:#999;

	bottom:0;

	right:0;

	cursor:pointer;

}

</style>


<div class="text">

	Текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст

<span class="knopka">Раскрыть/скрыть</span>

</div>


<script src="https://searchengines.guru/js/jquery.min.js"></script>

<script>

$('.knopka').click(function(){

   $('.text').css('height','auto');

});

</script>

Я так понимаю, что есть какая-то функция, которая отвечает за последовательность клик один раз и клик другой раз. Сейчас получается только изменить css при клике. Дайте направление. Как присвоить плавность раскрытия блока? В сети нашел пару вариантов с slideToggle, но он полностью показывает блок и полностью скрывает. У меня же блок в самом начале должен частично показываться.