visibility:hidden;と visibility:visible;で表示、非表示を作成する
尚、外部ファイルは取り込まずhtmlファイル内に<script></script>タグを使用して記述
show.html.erb
# クリックして開くところ
<div id="p1" class="dialog">
# クリックすることろ
<svg class="user-circleicon" onclick="clickBtn1()" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5.121 17.804A13.937 13.937 0 0112 16c2.5 0 4.847.655 6.879 1.804M15 10a3 3 0 11-6 0 3 3 0 016 0zm6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
...
</div>
show.html.erb
<script>
# デフォルトは非表示
document.getElementById("p1").style.visibility ="hidden";
function clickBtn1(){
const p1 = document.getElementById("p1");
if(p1.style.visibility=="visible"){
p1.style.visibility ="hidden";
}else{
p1.style.visibility ="visible";
}
}
</script>