JSで表示しているものと非表示にしているものをリンクをクリックしたら切り替えたいです。

実現したいこと

上から３つのボックスを順に並べており、以下状態を表しています。

◆グレーアウト・・・完了
◆青枠・・・確認中
◆グレー枠・・・待機

「こちら」のリンクをクリックするとクリックした対象のボックスは完了済となりグレーアウトし、次確認事項の直下のボックス（テスト２）が指定させたいです。（指定は青枠）

現状、青枠部を表示して、グレーアウトした状態のものをdisplay:noneで非表示としてます。
青枠部の「こちら」のリンクを押下されたら表示しているものと非表示のものを切り替えたいと考えています。

しかし、jsのソースに記載あるやり方だとテスト２の「こちら」をクリックして切り替えた後、次のテスト３が青枠にならない状態です。。

分かる方いらっしゃいましたらお力添えを頂きたいです。

以上、よろしくお願い致します。

該当のソースコード

html

<div id="test1" class="gray"> <div> <div class="main"> <ul class="center"> <h1 class="inner_ttl">テスト１</h1> <button href="#" class="link_txt" value="a">こちら</button> </ul> </div> <p class="txt">完了</p> </div> </div> <div id="test2" class="blue"> <div> <div class="main"> <ul class="center"> <h1 class="inner_ttl">テスト２</h1> <a href="#" class="link_txt" value="b" onclick="cl1()">こちら</a> </ul> </div> <p class="txt">確認中</p> </div> </div> <div class="blue" style="display: none; background-color: gray;"> <div> <div class="main"> <ul class="center"> <h1 class="inner_ttl">テスト2</h1> </ul> </div> <p class="txt">待機</p> </div> </div> <div id="test3" class="red"> <div> <div class="main"> <ul class="center"> <h1 class="inner_ttl">テスト３</h1> <button href="#" class="link_txt" value="c">こちら</button> </ul> </div> <p class="txt">待機</p> </div> </div> <div id="red" class="red" style="display: none; background-color: gray;"> <div> <div class="main"> <ul class="center"> <h1 class="inner_ttl">テスト３</h1> <a href="#" class="link_txt">こちら</a> </ul> </div> <p class="txt">待機</p> </div> </div>

css

.gray{ border-radius: 5px; background-color: gray; padding: 20px 25px; margin: 30px;} .blue{ border-radius: 5px; background-color: #fff; padding: 20px 25px; border: 2px solid blue; margin:20px 0px; margin: 30px;} .red{ border-radius: 5px; background-color: #fff; padding: 20px 25px; border: 2px solid #eee; margin: 30px;} .txt{ font-size: 16px;} .main{ display: flex;} .center{ width: 100%; display: flex; justify-content: space-between; align-items: center;} .inner_ttl{ font-size: 14px;} .link_txt{ color: black; cursor: pointer;}

js

function cl1() { let test2 = document.getElementById("test2"); if (test2.style.display = "none") { test2.style.display = "block"; } elseif(test2.style.display = "block"); { test2.style.display = "none"; }}