Primefaces折叠状态的fieldset组件内是否可展示指定内容？

该需求完全可以实现，以下是两种常用的实现方式：

方案1：利用header插槽实现（最简方案） #

PrimeFaces的fieldset组件的header区域默认不会随折叠状态隐藏，仅content区域会被折叠，因此可以把折叠状态下需要展示的内容直接放在header自定义插槽中：

<p:fieldset toggleable="true" collapsed="true" legend="设备管理">
    <!-- header插槽内的内容始终可见 -->
    <f:facet name="header">
        设备管理 <span style="float:right; color:#666; font-weight:normal;">在线设备：4台 | 离线设备：1台</span>
    </f:facet>
    <!-- 以下内容仅展开时可见 -->
    <p>设备1：存储服务器 192.168.1.20</p>
    <p>设备2：计算服务器 192.168.1.21</p>
    <p>设备3：缓存服务器 192.168.1.22</p>
    <p>设备4：备份服务器 192.168.1.23</p>
    <p>设备5：测试服务器 192.168.1.24 离线</p>
</p:fieldset>

方案2：自定义分区+CSS控制（灵活适配content区域展示需求） #

如果需要将部分展示内容放在content区域，折叠时仍保持显示，可以通过自定义样式类覆盖原生折叠逻辑实现：

1. XHTML代码示例

<p:fieldset toggleable="true" collapsed="true" legend="订单信息" styleClass="part-show-fieldset">
    <!-- 该类标记的内容折叠时仍展示 -->
    <p class="visible-when-collapsed">订单号：ORD202406150007 | 状态：运输中</p>
    <!-- 以下内容仅展开时可见 -->
    <p>收件人：李四</p>
    <p>收货地址：上海市浦东新区XX路XX大厦1203室</p>
    <p>物流单号：YTO1234567891234</p>
    <p>下单时间：2024-06-15 14:23:01</p>
</p:fieldset>

2. 配套CSS代码

/* 限定仅自定义类的fieldset生效，避免全局样式污染 */
.part-show-fieldset.ui-fieldset-collapsed .ui-fieldset-content {
    display: block !important;
    padding: 1rem 1rem 0 1rem;
}
/* 隐藏非指定类的内容 */
.part-show-fieldset.ui-fieldset-collapsed .ui-fieldset-content > :not(.visible-when-collapsed) {
    display: none !important;
}

注意事项 #

• 以上方案兼容PrimeFaces 8.0及以上所有主流版本，更低版本可调整对应样式类名适配
• 自定义样式建议加专属类限定范围，避免和框架原生样式冲突

内容的提问来源于stack exchange，提问作者babutian