当点击显示所有内容时,如何让div容器显示一些内容?

时间:2015-03-14 19:08:48

标签: html css button text textbox

我想知道如何制作它以便div容器在一个小文本框中显示其内容的一部分,并且文本框底部会有一个箭头指向下方,当点击时,它将会使文本框更大并显示其所有内容? 这可以用html / css实现,不需要使用javascript和jQuery,还是jQuery呢?

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

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

2 个答案:

答案 0 :(得分:1)

坏消息是你需要使用jQuery或类似的东西,但好消息是它相对直接。在将其加载到页面中之后,您需要做的就是定位要显示/隐藏的id(或者在jQuery toggle中调用它)并创建{{1事件。

例如,这样的事情应该有用。

onClick()

答案 1 :(得分:1)

你最相似的目标是使用html5,但这适用于谷歌浏览器,有时在Firefox中。

&#13;
&#13;
<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>
&#13;
&#13;
&#13;