JSFiddle - React, Tailwind, and code Playground

HTML

<a href="javascript:changePanel()" id = "p1">Скрыть паннель</a>
	<div id = 'panel'>
		Каждый веб-разработчик знает, что такое текст-«рыба». Текст этот, несмотря на название, не имеет никакого отношения к обитателям водоемов. Используется он веб-дизайнерами для вставки на интернет-страницы и демонстрации внешнего вида контента, просмотра шрифтов, абзацев, отступов и т.д. Так как цель применения такого текста исключительно демонстрационная, то и смысловую нагрузку ему нести совсем необязательно. Более того, нечитабельность текста сыграет на руку при оценке качества восприятия макета.</div>

<script>
    
    			function collapsePanel()
			{
				var step = 20;
				var panel = document.getElementById('panel');
					if(panel.clientHeight > 1)
					{
						var z = panel.clientHeight - step;
						panel.style.height = z + "px";
						setTimeout('collapsePanel()',50);
					}
					else
					{
						var panelTitle = document.getElementById('p1');	
						panelTitle.firstChild.nodeValue = "Закрыть панель";
						panel.style.display = "none";
					}
			}
			
			function changePanel()
			{
				var panel = document.getElementById('panel');
					if(panel.style.display == 'none')
					{
						panel.style.display = "";
						var panelTitle = document.getElementById('p1');	
						panelTitle.firstChild.nodeValue = "Открыть панель";
					}
					else
					{
						collapsePanel();
					}
			}
</script>

CSS

#p1{
				border: 1px solid black;
				background-color: grey;
				text-decoration: none;
				color: white;			
			}
			#panel{
				border: 1px solid grey;
				border-top-width: 0px;
				height: 200px;
    overflow: hidden;
			}