只需多加一个属性就能实现 WordPress 后台表单折叠展开效果

最近做了一个邮件模板功能，就是可以在后台定义各种情况下的发送邮件验证码的模板，如下图所示：

可以定义「注册账号」，「重置密码」，「验证邮箱」等各种情况下的邮件模板的标题和内容。使用 WPJAM Basic 的生成表单功能，实现是非常简单，具体的代码就是生成三个 fieldset 字段组，使用 foreach 简单就能处理：

$fields	= [];

foreach(['register'=>'注册账号', 'resetpass'=>'重置密码', 'verify'=>'验证邮箱'] as $type => $title){
	$fields[$type]	= ['title'=>$title,	'type'=>'fieldset',		'fields'=>[
		$type.'_subject'	=> ['title'=>'标题',	'type'=>'text'],
		$type.'_message'	=> ['title'=>'内容',	'type'=>'textarea',	'rows'=>3],
	]];
}

但是感觉这样重复的界面非常占用空间，有没有什么好的优化方式，比如折叠起来，点击展开之后再设置？

我查了一下，其实无需 Javascript，只需用 HTML 的 summary / details 这两个标签就能实现。

所以我增强了一下 WPJAM Basic fieldset 组件的能力，fieldset 组件只需要设定 summary 属性，就能使用 summary / details 实现折叠展开效果，具体代码如下：

$fields	= [];

foreach(['register'=>'注册账号', 'resetpass'=>'重置密码', 'verify'=>'验证邮箱'] as $type => $title){
	$fields[$type]	= ['title'=>$title,	'type'=>'fieldset',	'summary'=>$title.'时邮件设置',	'fields'=>[
		$type.'_subject'	=> ['title'=>'标题',	'type'=>'text'],
		$type.'_message'	=> ['title'=>'内容',	'type'=>'textarea',	'rows'=>3],
	]];
}

相比第一段代码，这段代码就是增加了 summary 属性设置，最后的效果如下：

默认情况都只显示摘要，点击摘要时候，就会展开字段组设置，如上图，我点击了第一个 fieldset 字段组的摘要，「注册账号」这个邮件模板就展开了，其他两个则还是没有折叠的状态。