javascript CSS 和 HTML：如何在单击时创建扩展 DIV？

CSS and HTML: How to create an Expanding DIV On Click?

提问by ant0nisk

I need to create a DIV that has some content (some of which is hidden) and when you click on it, it expands and reveals the rest of its content..

我需要创建一个包含一些内容（其中一些是隐藏的）的 DIV，当您单击它时，它会展开并显示其其余内容。

I have found many HOWTOs but use jQuery....

我找到了很多 HOWTO，但是使用 jQuery ....

I would like a solution using CSS and HTML (Javascript is good also!)

我想要一个使用 CSS 和 HTML 的解决方案（Javascript 也很好！）

Thanks in advance!

提前致谢！

回答by Prashobh

<div id="sample"></div>

css

css

#sample {
    border: 1px solid black;
    height: 15px;
    padding: 12px;
    overflow: hidden;    
}

javascript

javascript

document.getElementById("sample").onclick = function() {
    this.style.height = 'auto';
}

you can use some jquery for animated div

你可以使用一些 jquery 来制作动画 div