场景：手风琴图标没有状态区分
Bricks 提供了两个手风琴元素：
- Accordion（旧版）：可以在主题样式中分别设置「默认状态图标」和「展开状态图标」，全站生效。
- Accordion (Nestable)（新版，最常用）：不支持分别设置两种状态的图标。开箱即用时，图标在展开和收起状态下长得一模一样——默认的箭头图标始终指向同一个方向，用户看不出当前是开还是合。Bricks 官方至少该加一行 CSS 让图标在展开时转个向，可惜没有。
不过我们可以自己补上。核心思路：用 CSS 把图标默认旋转 90 度（箭头朝下），当条目处于展开态（.brx-open）时再旋转 -90 度（箭头朝上），并加过渡动画让旋转平滑。这是 BricksLabs 免费教程给出的完整方案。
完整 CSS
在 Bricks 编辑器里进入 Settings（齿轮图标）→ 自定义 CSS，或者放到子主题样式表，粘贴以下代码（原样保留）：
.accordion-title-wrapper .brxe-icon {
transform: rotate(90deg);
transition: 200ms transform ease-in-out;
}
.brx-open .accordion-title-wrapper .brxe-icon {
transform: rotate(-90deg);
}效果：默认箭头朝下（rotate 90deg），展开后箭头朝上（rotate -90deg），200ms 缓动过渡。
原理说明
- DOM 结构：Accordion (Nestable) 的每个条目标题由
.accordion-title-wrapper包裹，内部图标是.brxe-icon。CSS 选择器.accordion-title-wrapper .brxe-icon精确命中所有条目的标题图标，不误伤内容区的其他图标。 .brx-open是激活态标记：Bricks 所有可展开组件（手风琴、Tabs、Offcanvas）在展开时都会给根元素加.brx-open类。.brx-open .accordion-title-wrapper .brxe-icon表示「展开条目的标题图标」，两条规则一起构成状态切换。- transform 旋转为什么可行：图标本身是 SVG（或字体图标），旋转不改变布局占位，视觉上就是箭头指向变化；配合
transition: 200ms transform ease-in-out，旋转过程平滑不突兀。 - 想换更复杂的图标方案（比如默认加号、展开变减号），就得自己写规则或用 BricksExtras 插件的 Pro Accordion 元素——后者支持分别设置两种状态的图标，灵活性更高。
扩展：顺带做点状态样式
同一个 .brx-open 选择器还能顺手做更多状态反馈，比如展开条目的标题变色、加粗：
.brx-open .accordion-title-wrapper {
color: var(--bricks-color-accent);
font-weight: 600;
}这样「当前展开的是哪一项」在视觉上一目了然，FAQ 类页面尤其好用。注意 --bricks-color-accent 是 Bricks 的全局色板变量，换成你自己的主题色变量即可。
小结
两行 CSS 解决了 Accordion (Nestable) 的状态反馈缺失问题：默认朝下、展开朝上，还带平滑过渡。这个思路再次印证了 Bricks 的玩法——.brx-open 是驱动一切展开组件状态的关键类，任何「展开时要做点什么」的需求，几乎都能靠给它写 CSS 规则实现，图标旋转、标题变色、背景高亮都是同一套选择器的应用。