Title: Good Accordion
Author: J. Duijvelshoff
Published: 2025 年 4 月 5 日
Last modified: 2026 年 9 月 2 日
---
搜索插件
# Good Accordion
作者：[J. Duijvelshoff](https://profiles.wordpress.org/duijvelshoff/)
[下载](https://downloads.wordpress.org/plugin/good-accordion.1.1.zip)
* [详情](https://cn.wordpress.org/plugins/good-accordion/#description)
* [评价](https://cn.wordpress.org/plugins/good-accordion/#reviews)
* [安装](https://cn.wordpress.org/plugins/good-accordion/#installation)
* [开发进展](https://cn.wordpress.org/plugins/good-accordion/#developers)
[支持](https://wordpress.org/support/plugin/good-accordion/)
## 描述
Simple and good accordion plugin providing 2 blocks: Accordion and Accordion-pane.
Drag an Accordion block into your post, page or custom post type and hit the ‘Add
pane’ button for as often as you need.
Features:
* Setting for ‘One at a time’. Only one pane within an accordion can be opened.
Uncheck this to allow for all panes to be opened simultaneously.
* Use ‘Tab’ key to focus panes and hit ‘Enter’ to open
* Extensive Use of Accessability attributes
* Optionally choose for HTML and tags.
* Panes scroll into view when a previous pane gets closed
* Adjust colors, margins and padding in the block editor
* Add styling via css, css-vars or theme.json
### Use
Drag an Accordion block into a post or page or CPT and use the ‘Add pane’ button
at the bottom of the block to add pane-blocks.
### styling
At the root some basic styling variables are defined that can be overwritten by
your theme. Some of these can be changed ad hoc by the user in de block-editor.
These are:
```
--wp--custom--accordion--transition-time: 0.1s;
--wp--custom--accordion--margin-top: 0px;
--wp--custom--accordion--margin-right: 0px;
--wp--custom--accordion--margin-bottom: 0.1em;
--wp--custom--accordion--margin-left: 0px;
--wp--custom--accordion--header-padding-top: 0.5em;
--wp--custom--accordion--header-padding-right: 2em;
--wp--custom--accordion--header-padding-bottom: 0.5em;
--wp--custom--accordion--header-padding-left: 2em;
--wp--custom--accordion--content-padding-top: 0.5em;
--wp--custom--accordion--content-padding-right: 2em;
--wp--custom--accordion--content-padding-bottom: 0.5em;
--wp--custom--accordion--content-padding-left: 2em;
--wp--custom--accordion--header--text-color: #ffffff;
--wp--custom--accordion--header--background-color: #666666;
--wp--custom--accordion--header--active-text-color: #ffffff;
--wp--custom--accordion--header--active-background-color: #999999;
--wp--custom--accordion--body--text-color: #ffffff;
--wp--custom--accordion--body--background-color: #666666;
```
The default values can also be defined in the theme.json of your (child-) theme:
Add them to the theme.json like so:
```
{
"$schema": "https://schemas.wp.org/wp/6.7/theme.json",
"version": 3,
"settings": {
"custom": {
"accordion": {
"transitionTime": "0.1s",
"marginTop": "0px",
"marginRight": "0px",
"marginBottom": "0.1em",
"marginLeft": "0px",
"headerPaddingTop": "1em",
"headerPaddingRight": "1em",
"headerPaddingBottom": "1em",
"headerPaddingLeft": "1em",
"contentPaddingTop": "0.5em",
"contentPaddingRight": "2em",
"contentPaddingBottom": "0.5em",
"contentPaddingLeft": "2em",
"headerTextColor": "#ffffff",
"headerBackgroundColor" : "#666666",
"activeHeaderTextColor": "#ffffff"
"activeHeaderBackgroundColor": "#999999",
"bodyTextColor": "#000000",
"bodyBackgroundColor" : "#ffffff",
}
}
}
}Accessability
The pane-headers have a tab-index. If the Enter-key is pressed while a pane-header has focus, a click-event is triggered on that pane-header thereby activating / opening it.
```
## 屏幕截图
[⌊Good Accordion⌉⌊Good Accordion⌉[
Good Accordion
## 区块
该插件提供了 2 个区块.
* Accordion Pane Accordion Pane Block for Accordion.
* Accordion Accordion block, uses Accordion-pane block.
## 安装
Upload the plugin files to the `/wp-content/plugins/good-accordion` directory, or
install the plugin using the WordPress plugins screen directly.
Activate the plugin in the ‘Plugins’ screen in WordPress
## 常见问题
### Can I nest the accordion block into another accordion?
Yes. Just pull another good-accordion block into the open pane of another good-accordion
block.
## 评价
此插件暂无评价。
## 贡献者及开发者
「Good Accordion」是开源软件。 以下人员对此插件做出了贡献。
贡献者
* [ J. Duijvelshoff ](https://profiles.wordpress.org/duijvelshoff/)
「Good Accordion」插件已被翻译至 1 种本地化语言。 感谢[所有译者](https://translate.wordpress.org/projects/wp-plugins/good-accordion/contributors)
为本插件所做的贡献。
[帮助将「Good Accordion」翻译成简体中文。](https://translate.wordpress.org/projects/wp-plugins/good-accordion)
### 对开发感兴趣吗?
您可以[浏览代码](https://plugins.trac.wordpress.org/browser/good-accordion/)，查看
[SVN仓库](https://plugins.svn.wordpress.org/good-accordion/)，或通过[RSS](https://plugins.trac.wordpress.org/log/good-accordion/?limit=100&mode=stop_on_copy&format=rss)
订阅[开发日志](https://plugins.trac.wordpress.org/log/good-accordion/)。
## 更新日志
#### 1.1
_Release Date – june 2025_
* Added some more ARIA attributes;
* Added optional details / summary tags. Div tags are default and allow for animated
opening / closing of panes. Opening and closing of panes with details / summary
tags are determined by browser behaviour;
* Added seperate padding for header and content of the pane. Padding css-vars are
renamed thus:
* –wp–custom–accordion–header-padding-top: 0.5em;
–wp–custom–accordion–header-
padding-right: 2em; –wp–custom–accordion–header-padding-bottom: 0.5em; –wp–custom–
accordion–header-padding-left: 2em; –wp–custom–accordion–content-padding-top:
0.5em; –wp–custom–accordion–content-padding-right: 2em; –wp–custom–accordion–
content-padding-bottom: 0.5em; –wp–custom–accordion–content-padding-left: 2em;
* Added translations
#### 1.0.2
_Release Date – 14 April 2025_
* Replaced Dashicons with some SVG sources
* Toggle switch for icon-position in header pane
* Updated translation
* Added nl_NL-formal translation
#### 1.0.1
_Release Date – 10 April 2025_
* Minor bugfix in accordionpane header-tag
## 额外信息
* 版本 **1.1**
* 最后更新：**1 月前**
* 活跃安装数量 **不到10**
* WordPress 版本 ** 6.7 或更高版本 **
* 已测试的最高版本为 **7.1.3**
* PHP 版本 ** 7.4 或更高版本 **
* 语言
* [Dutch](https://nl.wordpress.org/plugins/good-accordion/) 和 [English (US)](https://wordpress.org/plugins/good-accordion/).
* [翻译成简体中文](https://translate.wordpress.org/projects/wp-plugins/good-accordion)
* 标签
* [Accordion](https://cn.wordpress.org/plugins/tags/accordion/)[faq](https://cn.wordpress.org/plugins/tags/faq/)
* [高级视图](https://cn.wordpress.org/plugins/good-accordion/advanced/)
## 评级
尚未提交反馈。
[您的评价](https://wordpress.org/support/plugin/good-accordion/reviews/#new-post)
[查看全部评论](https://wordpress.org/support/plugin/good-accordion/reviews/)
## 贡献者
* [ J. Duijvelshoff ](https://profiles.wordpress.org/duijvelshoff/)
## 支持
有话要说吗？是否需要帮助？
[查看支持论坛](https://wordpress.org/support/plugin/good-accordion/)
## 捐助
您愿意支持这个插件的发展吗?
[ 捐助此插件 ](https://hollands-spoor.com/donate/)