HTML 和 CSS 只显示/隐藏？

Question

我正在制作故事 map (ArcGIS/Esri 产品，允许您制作各种类型的地理引用演示文稿)，允许您使用嵌入式 HTML 和 CSS(在 <style> 标签内)。我遇到的问题是我想显示/隐藏不同主题的附加信息，但我一直无法成功实现此功能。

我试过崩溃Bootstrap方法，最初有效，但几个小时后它不再有效(使用按钮方法按钮停止工作，使用 href 方法它只是在新页面中再次打开故事 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

监听按钮的点击事件，

Using only 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>

Using only 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