如何让文本区域在点击时展开？

要让文本区域在点击时展开，可以通过添加交互事件和CSS样式来实现。

首先，在HTML中，我们需要创建一个文本区域的元素，例如使用 <div> 或 <p> 标签。

然后，在CSS中，给文本区域添加一个初始的固定高度，并设置 overflow: hidden，这样初始状态下只会显示部分文本内容，并隐藏剩余部分。

接下来，使用JavaScript来实现点击事件。可以使用原生的JavaScript或者框架如jQuery等。

如果使用原生的JavaScript，可以为文本区域的元素添加一个点击事件监听器，当点击事件触发时，动态修改文本区域的高度，将其展开至需要的高度，可以使用 style.height 来修改高度属性。

如果使用jQuery，可以使用 toggle() 方法，在点击时切换文本区域的高度，实现展开和收缩效果。

总结一下步骤：

1. 创建文本区域的HTML元素，例如使用 <div> 或 <p> 标签。
2. 在CSS中，给文本区域设置初始的固定高度，并添加 overflow: hidden 属性。
3. 使用JavaScript或jQuery为文本区域添加点击事件监听器。
4. 当点击事件触发时，使用JavaScript或jQuery动态修改文本区域的高度，实现展开效果。

以下是一个示例的代码：

HTML:

<div class="text-container">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sed nisl mauris.</p>
</div>

CSS:

.text-container {
  height: 100px;
  overflow: hidden;
  cursor: pointer;
}

JavaScript:

var textContainer = document.querySelector('.text-container');
textContainer.addEventListener('click', function() {
  if (textContainer.style.height === '100px') {
    textContainer.style.height = 'auto';
  } else {
    textContainer.style.height = '100px';
  }
});

jQuery:

$('.text-container').click(function() {
  $(this).toggleClass('expanded');
});

上述代码中的 JavaScript 版本实现了点击展开和点击收缩的效果，而 jQuery 版本使用了 CSS 类 .expanded 来切换文本区域的高度。