Javascript 在HTML和CSS中单击显示隐藏div而不使用jQuery

我想要一些非常类似于主题化的可折叠标题，位于此处：

如果不使用JQuery，这是可能的吗

---

这是一个移动网站，但页面总是会离线，所以我真的不想使用jquery。另外，为jquery mobile提供自定义样式要比使用纯css并自己设置样式困难得多。

您可以使用

复选框来模拟onClick和css：

input[type=checkbox]:checked + p {
    display: none;
}


使用
标签
和
复选框
输入
保持所选项目处于打开状态并可切换


。折叠{
光标：指针；
显示：块；
背景：#cdf；
}
.折叠+输入{
显示：无；/*隐藏复选框*/
}
.折叠+输入+div{
显示：无；
}
.折叠+输入：选中+div{
显示：块；
}
折叠1
内容1
崩溃2
内容2当然！jQuery毕竟只是一个利用javascript的库

您可以使用document.getElementById获取相关元素，然后通过element.style.height相应地更改其高度

elementToChange = document.getElementById('collapseableEl');
elementToChange.style.height = '100%';

用一个整洁的小函数将其封装起来，以满足来回切换的需要，您就有了一个解决方案。
我喜欢Roko的答案，并在其中添加了几行，这样您就可以得到一个三角形，当元素隐藏时它指向右侧，当元素显示时它指向下方：

.collapse { font-weight: bold; display: inline-block; }
.collapse + input:after { content: " \25b6"; display: inline-block; }
.collapse + input:checked:after { content: " \25bc"; display: inline-block; }
.collapse + input { display: inline-block; -webkit-appearance: none; -o-appearance:none; -moz-appearance:none;  }
.collapse + input + * { display: none; }
.collapse + input:checked + * { display: block; }

使用display:none不利于搜索引擎优化。以下方法允许搜索隐藏内容。添加转换延迟可确保隐藏内容中包含的任何链接都可以单击

.collapse > p{
cursor: pointer;
display: block;
}

.collapse:focus{
outline: none;
}

.collapse > div {
height: 0;
width: 0;
overflow: hidden;
transition-delay: 0.3s;
}

.collapse:focus div{
display: block; 
height: 100%;
width: 100%;
overflow: auto;
}

<div class="collapse" tabindex="1">
<p>Question 1</p>
<div>
  <p>Visit <a href="https://stackoverflow.com/">Stack Overflow</a></p>
</div>
</div>
<div class="collapse" tabindex="2">
<p>Question 2</p>
<div>
  <p>Visit <a href="https://stackoverflow.com/">Stack Overflow</a></p>
</div>
</div> 

.collapse>p{
光标：指针；
显示：块；
}
.崩溃：聚焦{
大纲：无；
}
.collapse>div{
身高：0；
宽度：0；
溢出：隐藏；
过渡延迟：0.3s；
}
.折叠：焦点div{
显示：块；
身高：100%；
宽度：100%；
溢出：自动；
}
问题1

拜访

问题2

拜访

页面离线并不意味着你不能使用jquery，你可以将其存储在本地。没错，但我宁愿不使用它，也不愿缓存它。这是一个ios浏览器控件，所以我不需要支持IE6/7。我还必须找到jquery mobile使用的所有图像，并将其存储在本地。很好的解决方案，是否可以一次扩展多个图像，并通过重新单击来折叠打开的图像？@dev6546当然，请查看第一个演示链接感谢详细信息/摘要html5解决方案。当场！：）这太棒了！有人知道我是否可以在电子邮件模板上使用此解决方案之一吗？为了改进此答案，您还可以添加过渡效果：您好，您知道此解决方案是否可以在电子邮件模板上使用吗？