JSFiddle - React, Tailwind, and code Playground

HTML

<table>
<tr id="tr1">
<th colspan="1" width="1%">
<a id="searchChange" onclick="return searchChange()" href="">－</a>
</th>
<th colspan="4">
title
</th>
</tr>
<tr id="tr2">
<td rowspan="3"> </td>
<td>123456</td>
<td>789456</td>
<td>017852</td>
<td>698852</td>
</tr>
<tr id="tr3">
<td>apple</td>
<td>bags</td>
<td>balana</td>
<td>orange</td>
</tr>
<tr id="tr4">
<td>１２３４５</td>
<td>６７８９０</td>
<td>１２３４５</td>
<td>６７８９０</td>
</tr>
</table>
 
<input type="hidden" name="searchChangeFlg" id="searchChangeFlg" value="0" onclick="searchChange();" />

CSS

table  {
	border-collapse:collapse;
	width:50%;
}
th {
	border:1px solid black;
}
td {
	border:1px solid black;
}

JavaScript

function searchChange() {
	if (document.getElementById("searchChangeFlg").value == "1") {
		document.getElementById("tr2").style.display="block";
		document.getElementById("tr3").style.display="block";
		document.getElementById("tr4").style.display="block";
		document.getElementById("searchChange").innerHTML = "－";
		document.getElementById("searchChangeFlg").value = "0";
	} else {
		document.getElementById("tr2").style.display="none";
		document.getElementById("tr3").style.display="none";
		document.getElementById("tr4").style.display="none";
		document.getElementById("searchChange").innerHTML = "＋";
		document.getElementById("searchChangeFlg").value = "1";
	}
 
	return false;
}