JS HTML ボタンを押したとき折り畳みの開閉と同時にカウントを行いたい

Question

前提・実現したいこと

実現したいこと
オンラインテストのようにボタンを押した後カウントが始まったと同時に問題(コンテンツ）が見れるようにしたい
別々のボタンを用意すれば簡単だが一つのボタンで二つとも行いたい。
こちらのサイトを参考にボタンの折り畳みの開閉を作成しました。

発生している問題・エラーメッセージ

ボタンを押したときカウントが行われるが、折り畳まれたコンテンツは表示ない。
押す前

押した後

該当のソースコード

<!-- bootstrapのcss,jsを読み込む -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

<!-- トリガーとなるリンク&ボタン -->
<button
  type="button"
  data-toggle="collapse"
  data-target="#collapseExample"
  aria-expanded="false"
  aria-controls="collapseExample"
  value="カウント開始" 
  id="startcount"   　　　　　　　
  onclick="startShowing()"
>
  ボタンで開閉させる
</button>
<!-- /トリガーとなるリンク&ボタン -->
<input type="button" value="カウント停止" id="endcount" onclick="stopShowing()">
<!-- 対象のコンテンツ -->
<div class="collapse" id="collapseExample">
  開閉させるコンテンツ
  開閉させるコンテンツ
  開閉させるコンテンツ
</div>
<!-- /対象のコンテンツ -->

<p id="PassageArea">(ここにカウントが表示されます)</p>




    <script>
      var count;   // 秒数カウント用変数
      var PassSec;
      var TimeLimit=30;
      // 繰り返し処理の中身
      function showPassage() {
         count++;   // カウントアップ
         PassSec = TimeLimit - count ;
         var msg = "ボタンを押してから " + PassSec + "秒が経過しました。";   // 表示文作成
         document.getElementById("PassageArea").innerHTML = msg;   // 表示更新
         if(PassSec==0){
           stopShowing();
           
         }
      }

      // 繰り返し処理の開始
      function startShowing() {
         count = 0;   // カウンタのリセット
         PassageID = setInterval('showPassage()',1000);   // タイマーをセット(1000ms間隔)
         document.getElementById("startcount").disabled = true;   // 開始ボタンの無効化
      }

      // 繰り返し処理の中止
      function stopShowing() {
         clearInterval( PassageID );   // タイマーのクリア
         document.getElementById("startcount").disabled = false;   // 開始ボタンの有効化
      }
      
</script>

Answer 1

仕様があいまいなところがありますが・・・

<style>
#collapseExample.collapse{
display:none;
}
</style>
<button
  type="button"
  data-toggle="collapse"
  data-target="#collapseExample"
  aria-expanded="false"
  aria-controls="collapseExample"
  value="カウント開始"
  id="startcount"
>
  ボタンで開閉させる
</button>
<div class="collapse" id="collapseExample">
  開閉させるコンテンツ
  開閉させるコンテンツ
  開閉させるコンテンツ
</div>
<p id="PassageArea">ここにカウントが表示されます</p>
<script>
let timerId;
let flg=true;
const counttime=30;
const target=document.querySelector(startcount.dataset["target"]);
const toggle=startcount.dataset["toggle"];
startcount.addEventListener('click',()=>{
  const starttime=new Date().getTime()
  target.classList.toggle(toggle);
  if(flg){
    timerId=setInterval(()=>{
      const time=new Date().getTime()
        PassageArea.textContent=(counttime-parseInt(time-starttime)/1000);
    },100);
  }else{
    clearInterval(timerId);
  }
  flg=!flg;
});
</script>

Comments

[kmkr]

回答ありがとうございます！
質問なのですがscript内のstartcountというのは
const startcount = document.getElementById('startcount');
こういうことなのでしょうか？

[yambejp]

idを振ったHTML要素はid名だけでアクセスできます。
ただし、今回は省略しましたがバグを避けるためには
const startcount = document.querySelector('#startcount');
のような宣言をしておくのがベターです

[kmkr]

本当にありがとうございます！うまく動作させることができました！
しかし、私のコードはどこが良くなかったのかわかりますか？カウントダウン部分のみが書き換えられているのでその箇所なのだと思いますが。