JSFiddle - React, Tailwind, and code Playground

HTML

<div id="block1">
    <div id="result1">
        A - 1<br>B - 2<br>C - 3
        </div>
        <div id="buttons">
            <div href="javascript:void(0)" onclick="showRes('result1')" id="resultbut">Показать</div>
        </div>
</div>

CSS

div#block1 {
				width: 95%;
				max-width: 800px;
				bottom: 75px;
				margin: 200px auto 0;
				padding: 20px;
				background-color: #ffffff;
				display: block;
				border: 1px solid #000000;
			}
			
			div#buttons {
				margin: 20px 0 10px 0;
				text-align: center;
			}
			
			div#resultbut {
				width: 150px;
				height: 25px;
				padding: 5px 10px;
				display: inline-block;
				border: 1px solid #000000;
			}
			
			div#resultbut:hover {
				cursor: pointer;
			}
			
			div#result1 {
				display: none;
				margin: 15px 0 0 0;
			}

JavaScript

function showRes(result_id) {
				var res = document.getElementById(result_id);

				if (res.style.display = "none") { 
					res.style.display = "block";
				}
				else {
					res.style.display = "none";
				}
			}