HTML和CSS仅显示/隐藏？

我正在制作一个故事地图（ArcGIS/Esri产品，允许您制作各种类型的地理参考演示文稿），允许您使用嵌入式HTML和CSS（在

标记中）。我遇到的问题是，我想显示/隐藏有关不同主题的其他信息，但我无法成功实现此功能

我尝试了collapse方法，该方法最初有效，但几个小时后就不再有效了（使用button方法按钮停止工作，使用href方法它只是在新页面中再次打开故事地图）。以下是代码：

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

更多有关野花的资料

从我收集的资料来看，这个问题是因为故事图缺少引导依赖项，但我不知道如果是这样的话，为什么它最初会起作用

我也尝试了所有的解决方案，但没有一个有效。当我保存并退出HTML编辑器时，它似乎“编译”了代码，删除了它运行所需的部分代码。这可能是一个不充分的解释，但我可以包括例子，如果需要的话

---

故事地图确实支持JavaScript和其他更深入的HTML工作，但您必须下载源代码并重新主持它，这不是本项目的选项。我有Java、C和其他一些语言的经验，但对HTML及其实现方式知之甚少，所以这让我发疯。感谢您的帮助

在按钮上侦听单击事件，

仅使用JavaScript，

const btn=document.querySelector（'.btn'）；
const collapse=document.querySelector（'.collapse'）；
//最初隐藏图像
collapse.style.display=“无”；
var hidden=true；
//单击事件侦听器
btn.addEventListener（'click'，handleClick）；
//单击事件处理程序
函数handleClick（e）{
如果（隐藏）{
隐藏=错误；
collapse.style.display=“block”；
}
否则{
隐藏=真实；
collapse.style.display=“无”；
}
}

有关野花的更多信息

---

为什么需要下载源代码？JavaScript内置于浏览器中。为了清楚起见，每当用户单击button元素时，您都想显示/隐藏.collapse元素吗？@Laif我曾尝试将JavaScript与

标记一起使用，但当我保存它时，它会删除标记和其中的所有内容。我对它了解得不够，无法理解为什么。@hrithik gautham纠正了这一错误：它是从文件中删除它们，还是只是不显示在浏览器中@Lorenarnold谢谢你，虽然这对我也不起作用：/当我保存HTML源文本时，它将其更改为：

label{cursor:pointer；}div.collapse{display:none；}btn checkbox{width:0；height:0；opacity:0；}btn checkbox:checked+div.collapse{display:block；}有关Wildflower的详细信息

按钮在那里，但单击它什么也不做。@LorenArnold尝试将样式标记嵌套在head标记中，将HTML的其余部分嵌套在body标记中。