JSFiddle - React, Tailwind, and code Playground

HTML

<nav>
        <a class="show" href="#block-1">Показать блок 1</a>
        <a class="show" href="#block-test">Показать блок 2</a>
        <a class="show" href="#block-3">Показать блок 3</a>
        <a class="show" href="#block-4">Показать блок 4</a>
    </nav>

	<div class="test" id="block-1">
		Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem accusantium aliquid eaque iste quae, modi nam
        beatae, possimus tempora, ab, doloribus totam reiciendis! In nemo, fugit tempore doloribus deserunt modi.
		<a href="#block-1" class="hide">x</a>
	</div>

	<div class="test" id="block-test">onsectetur adipisicing elit. Numquam, voluptatibus dolorem tempore obcaecati
        dolores fuga aliquam, veniam saepe cupiditate earum nobis sequi sed enim placeat culpa natus nostrum, omnis
        asperiores.<a href="#block-test" class="hide">x</a> </div>

	<div class="test" id="block-3">in, deserunt velit dolorum atque sunt itaque dolores aspernatur explicabo praesentium
        illum nisi.<a href="#block-3" class="hide">x</a></div>

	<div class="test" id="block-4"> Nobis odit dolorem, accusantium fugit eveniet expedita aperiam quam omnis veritatis
        facilis voluptatibus nemo praesentium saepe? Similique delectus magnam impedit fuga
        non.<a href="#block-4" class="hide">x</a> </div>

CSS

nav {
            margin-bottom: 25px;
        }

		.test {
			//max-width: 600px;
			width: 600px;
            font-size: 0;
            //padding: 0;
			box-sizing: border-box;
			background: #e9e9e9;
			margin: 0;
			position: relative;
            line-height: 0;
            //transform: scaleY(0);
            //transform-origin: top;
            transition: 0.4s;
            overflow: hidden;
			height: 0;
		}

        .visible {
            line-height: 1.4;
            font-size: 16px;
            padding: 15px 30px;
            margin: 0 0 15px;
            //transform: scaleY(1);
			height: auto;
        }

		.show {
		  margin: 10px;
			color: darkcyan;
			text-decoration: none;
			border-bottom: 1px dashed;
		}

		.show:hover {
			border-bottom-color: transparent;
		}

		.hide {
			position: absolute;
			right: 0;
			top: 0;
			font-size: 22px;
			color: #ccc;
			text-decoration: none;
			padding: 8px 12px;
		}

		.hide:hover {
			color: #888;
		}
		.bright {
			color: deeppink;
		}

JavaScript

let btns = document.querySelectorAll('.show');
 let closeBtns = document.querySelectorAll('.hide');
 let classShow = 'visible';
 let classBright = 'bright';

 btns.forEach((btn) => btn.addEventListener('click', function(e) {
   e.preventDefault();
   let param = this.getAttribute('href');
   document.querySelector(param).classList.toggle(classShow);

   this.classList.toggle(classBright);
 }))

 closeBtns.forEach((closeBtn) => closeBtn.addEventListener('click', function(e) {
   e.preventDefault();
   let param = this.getAttribute('href');
   document.querySelector(param).classList.remove(classShow);
   console.log("param= " + param);

   // теперь найдем соответствующую кнопку из менюшки

   for (let n = 0; n < btns.length; n++) {

     if (btns[n].getAttribute('href') === param) {
       btns[n].classList.remove(classBright);
     }
   }
 }))