HTML和CSS仅显示/隐藏？

Question

我正在制作一个Story Map（ArcGIS / Esri产品，它使您可以制作各种类型的地理参考演示文稿），使您可以使用嵌入式HTML和CSS（在<style>标记内）。我遇到的问题是我想显示/隐藏有关不同主题的其他信息，但是我无法成功实现此功能。

我尝试了崩溃Bootstrap方法，该方法最初可以使用，但几个小时后它不再起作用（使用button方法，该按钮停止工作，使用href方法，它仅在新页面中再次打开Story Map）。这是该代码：

<p>
  <button aria-controls="collapseFlowers" aria-expanded="false" 
          class="btn btn-primary" data-target="#collapseFlowers" 
          data-toggle="collapse" 
          type="button">
     More information on Wildflower
  </button>
</p>

<div class="collapse">
  <div class="card card-body">
    <img alt="" src="https://i.imgur.com/Bidb7cR.png" />
  </div>
</div>

根据我的收集，这个问题是因为Story Map缺少Bootstrap依赖关系，但是我不知道为什么在这种情况下它最初会起作用。

我还尝试了所有解决方案here，但都没有成功。当我保存并退出HTML编辑器时，似乎可以“编译”代码，删除其运行所需的部分。这可能是一个不足的解释，但如果需要，我可以提供一些示例。

Story Maps确实支持JavaScript和其他更深层次的HTML，但是您必须下载源代码并重新托管它，这不是该项目的选项。我对Java，C和其他一些语言有丰富的经验，但是对HTML及其实现方式知之甚少，这使我发疯。任何帮助表示赞赏！

Answer 1

听按钮上的点击事件，

仅使用JavaScript，

const btn = document.querySelector('.btn');
const collapse = document.querySelector('.collapse');
// initially hide the image
collapse.style.display = "none";
var hidden = true;

// click event listener
btn.addEventListener('click', handleClick);

// click event handler
function handleClick (e) {
  if (hidden) {
    hidden = false;
    collapse.style.display = "block";
  }
  else {
    hidden = true;
    collapse.style.display = "none";
  }
}
    

<p><button aria-controls="collapseFlowers" aria-expanded="false" class="btn btn-primary" data-target="#collapseFlowers" data-toggle="collapse" type="button">More information on Wildflowers</button></p>

<div class="collapse">
<div class="card card-body"><img alt="" src="https://i.imgur.com/Bidb7cR.png" /></div>
</div>

仅使用CSS，

label {
  cursor: pointer;
}

div.collapse {
  display: none;
}


#btn-checkbox {
  width: 0;
  height: 0;
  opacity: 0;
}


#btn-checkbox:checked + div.collapse {
  display: block;
}

<button><label for="btn-checkbox">More information on Wildflower</label></button>
<input id="btn-checkbox" type="checkbox"/>
    <div class="collapse">
    <div class="card card-body"><img alt="" src="https://i.imgur.com/Bidb7cR.png" /></div>
    </div>

我对上面的代码做了一些更改，以便可以舒适地工作。与该帖子相关的链接，CSS-tricks