JavaScriptでクラスの除去と追加を簡単に行えたので、コードを載せとく。

document.addEventListener('DOMContentLoaded', () => {
  const el = document.getElementById('toggle-btn')
  el.addEventListener('click', () => {
    if (document.getElementById('hidden-contents').classList.toggle("is-hidden")) {
      el.textContent = "＋"
      return
    }
    el.textContent = "ー"
  })
})

<button type="button" id="toggle-btn">＋</button>

<div id="hidden-contents" class="is-hidden">
  <p>hello world!</p>
</div>

.is-hidden {
  display: none;
}

「＋」ボタンがクリックされるとリスナーが反応し、document.getElementById('hidden-contents').classList.toggle("is-hidden")で指定のDOMにis-hiddenクラスが存在する場合は除去し、存在しない場合は追加する。戻り値はtrue,falseである。

ちなみに、今回特に画像に関する処理を行っていないのでページの初期化にDOMContentLoadedを利用している。 DOMContentLoadedイベントはDOMツリーの構築が完了した時点で発火される。

参考サイト