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

Question

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

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

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

Answer 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>