HTML标记在IE / Edge中不起作用

我正在尝试添加用户可以显示和隐藏的其他可切换部分.

我的要求：

>支持主流浏览器(Opera,Chrome,Edge,IE11,Firefox,Mac上的Safari)
>没有javascript

并且正考虑使用< details>标签,但代码

<details>
  <summary>Toggle</summary>
  <p>Hideable</p>
</details>

在Edge / IE浏览器上不起作用.

我可以无论如何“制造”它的工作,还是还有什么我可以用来完成这项任务？只要没有javascript,黑客就可以了.

这将是使用隐藏复选框的建议：checked方法：

.toggler {
  display: none;
}

.toggler+.toggler-content {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: all .4s ease-in-out;
}

.toggler:checked+.toggler-content {
  max-height: 1000px;
  opacity: 1;
}

<div>
  <label for="toggler-id-1">Toggle</label>
  <input type="checkbox" id="toggler-id-1" class="toggler" />
  <div class="toggler-content">Hideable</div>
</div>

我仍然更喜欢使用@Finesse的解决方案,因为它允许您使用语义正确的HTML元素.