要实现通用的展开折叠按钮的功能，您可以使用 HTML、CSS 和 JavaScript 来实现。以下是一个简单的示例：

HTML 代码：

<div class="container">
  <div class="toggle">
    <span class="handle"></span>
    <span class="text">展开</span>
  </div>
  <div class="content">
    <!-- 内容 -->
  </div>
</div>

CSS 代码：

.toggle {
  cursor: pointer;
}

.handle {
  width: 12px;
  height: 100%;
  margin: -4px 0 0 -4px;
  border: 1px solid #ccc;
  background: #fff;
  box-sizing: border-box;
  transition: 0.2s;
}

.toggle.active .handle {
  transform: translateX(100%);
}

.toggle.active .text {
  display: none;
}

JavaScript 代码：

const toggle = document.querySelector('.toggle');
const handle = toggle.querySelector('.handle');
const text = toggle.querySelector('.text');

handle.addEventListener('click', function() {
  toggle.classList.toggle('active');
});


var toggle = $('.toggle');
var handle = toggle.find('.handle');
var text = toggle.find('.text');

handle.click(function() {

  toggle.toggleClass('active');

});

在上面的代码中，.container 元素是一个容器，其中包含两个子元素：.toggle 和 .content。.toggle 元素是一个包含按钮和按钮标签的 div 元素，.content 元素是要折叠或展开的内容。

CSS 代码定义了.toggle 元素的样式，包括一个鼠标指针悬停在其上时的光标，以及一个带有样式的指针和文本。.handle 元素是按钮的指针，.toggle.active 类定义了当按钮处于活动状态时指针的样式。.toggle.active .text 类定义了当按钮处于活动状态时标签的样式。

JavaScript 代码使用 addEventListener() 方法将一个点击事件监听器添加到 .handle 元素上。当用户单击按钮时，toggle.classList.toggle('active') 方法将活动状态从 false 更改为 true 或相反。

当用户与 Web 页面交互时，CSS 样式的作用是将页面元素呈现出相应的视觉效果。这种视觉效果通常通过使用 CSS 选择器来实现。CSS 选择器是用于选择特定元素的规则，例如标记名称、类、ID 和属性。通过使用这些选择器，您可以将 CSS 样式应用于您的页面元素，并使它们呈现出特定的样式和布局。

在前端开发中，我们经常需要通过动态更改页面元素的样式来响应用户的交互行为。这可以通过使用 JavaScript 来实现。一种常见的方法是使用 classList API 来添加或删除 CSS 类，从而动态更改元素的样式。

例如，当用户单击一个按钮时，我们可以使用 JavaScript 来动态地添加或删除 active 类，并将其应用于 .text 和 .content 元素。在 CSS 中，我们可以定义一组样式，其中包括在元素被添加或删除 active 类时要应用的样式。这将使我们能够通过更改元素的类名来实现动态样式的变化，而无需重新加载整个页面。

另一种常见的交互方式是单击一个按钮来显示或隐藏元素。在这种情况下，我们可以使用 JavaScript 来动态地添加或删除 active 类，并将其应用于 .text 和 .content 元素。在 CSS 中，我们可以定义一组样式，其中包括在元素被添加或删除 active 类时要应用的样式。这将使我们能够通过更改元素的类名来实现动态样式的变化，而无需重新加载整个页面。

无论是动态添加或删除类来响应用户交互，还是通过更改元素的样式来实现显示或隐藏，使用 JavaScript 和 CSS 都是实现这些功能的有效方法。通过使用这些技术，我们可以为用户提供更加动态和交互性的 Web 体验，并使页面更加响应和灵活。