单击以显示所有内容时，如何使 div 容器显示一些内容？答案

【问题标题】：How do I make a div container show some content, when clicked to show all content?单击以显示所有内容时，如何使 div 容器显示一些内容？
【发布时间】：2015-03-14 19:08:48
【问题描述】：

我想知道如何使一个 div 容器在一个小文本框中显示其部分内容，并且在文本框底部会有一个向下的箭头，当点击它时，它会使文本框更大并显示其所有内容？这可以使用 html/css 来实现，而不需要使用 javascript 和 jQuery 还是 jQuery 的东西？

    <div class="society3" style="overflow:auto">
    <p>Description:<p>
    <p><?php echo $description; ?></p>
    </div>

description 变量只包含一段文本，所以我希望 div 容器显示部分文本，当有人想阅读完整描述时，他们可以单击按钮，框将扩展以显示所有div标签的内容。

【问题讨论】：

您是否查看过 HTML5 详细信息和摘要标签？ blog.teamtreehouse.com/use-details-summary-elements
我所说的显示某些内容的意思是已经显示了大部分文本，然后在底部有一个按钮来显示所有内容。

标签： html css button text textbox

【解决方案1】：

坏消息是你需要使用 jQuery 或类似的东西来做类似的事情，但好消息是它相对简单。将其加载到页面后，您需要做的就是定位您想要显示/隐藏的 id（或在 jQuery 中调用的 toggle）并创建一个 onClick() 事件。

例如，这样的事情应该可以工作。

<script>
$(document).ready(function(){
    $("button").click(function(){
        $("#toggle").toggle();
    });
});
</script>

<div id="button" class="society3" style="overflow:auto">
    <p>Description:<p>
    <p id="toggle" style="display: none">[content]</p>
</div>

【讨论】：

谢谢，不过，我以前没用过 jQuery，我用过一次，但没有成功。我的代码中还需要什么才能使其正常工作

【解决方案2】：

与您的目标最相似的是使用 html5，但这适用于 google chrome，有时也适用于 Firefox。

<html>
	<head><meta charset="UTF-8"></head>
	<style type="text/css">
	 .expand{
	 	padding:10px;
	 }
	</style>
	<div class="expand">
	 <details>
	    <summary>OPEN</summary>
	    <p>Some text</p>
	 </details>
	</div>
</html>

【讨论】：