css 展开加号图标 |css 被选中的元素的父元素

横向滚动css，css 元素全局居中，scss文件引入css，js文本的css对齐，css怎么让图片撑满页面，什么是css综合症，css 被选中的元素的父元素 css 展开加号图标 |css 被选中的元素的父元素

/* CSS代码 */
.expand-btn {
display: flex;
align-items: center;
cursor: pointer;
}
.expand-icon {
margin-right: 5px;
font-size: 16px;
}
.expand-content {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease-out;
}
.expand-btn.active .expand-content {
max-height: 500px; /* 根据具体需求调整高度 */
}

以上CSS代码中，.expand-btn是展开按钮的外层元素，.expand-icon是加号图标，.expand-content是要展开的内容。

在HTML中，需要将加号图标和要展开的内容包裹在.expand-btn中，其中加号图标使用字体图标或SVG图形均可，如下所示：

当点击加号图标时，使用JavaScript为.expand-btn添加active类，使.expand-content的max-height属性设为一个较大的值，从而实现展开效果。

通过这样的实现方式，可以轻松添加展开加号图标的功能，让页面看起来更加时髦和交互。