Fandom Developers Wiki
Advertisement

本页面或其中部分内容仍未翻译。请将其翻译为适当的语言(中文)。

Accordion is a script that allows users to create collapsible accordions in a page.

安装[]

About[]

Accordions are collapsible menus used in pages to show and hide content, just like collapsible tables, but with a few differences that aim at improving accessibility by using semantic elements and are less troublesome to use compared to the wikitables approach.

These elements are made out of two main parts: the header and the panel.

  • The header is the part that is visible all the time and works as both a heading and a button to show its contents.
  • The panel is the part that is usually hidden by default and can be displayed by interacting with its header. Here is where all of the contents of the accordion are placed.

By default, all accordion headers will have an arrow icon to indicate it's current status. When there is a nested accordion, the first-level accordions will change their icons to a "plus" sign that will change to a "minus" sign when it is expanded. When animations are enabled, the "minus" sign is changed by an "X".

使用方法[]

Once you've imported both the Lua module and the Javascript and created its respective template in your wiki, you can use it like so:

{{Accordion
| type = [text/links]
| animation-duration   = [int]
| accordion-n-expanded = true?
| accordion-n-title    = [string]
| accordion-n-contents = [anything]
| accordion-n-link-N   = [link]
}}

To use it (as a user), all you have to do is click on the heading labels that will display each accordion to reveal more content below it. Clicking the header when the panel has been opened will make it close again.

You can also use the keyboard buttons to navigate and use the accordion (while focusing any of its elements):

  • ↹ Tab// will focus the next accordion.
  • ⇧ Shift + ↹ Tab// will focus the previous accordion.
  • ⇤ Home will focus the first accordion.
  • ⇥ End will focus the last accordion.
  • Space/↵ Enter will open the selected accordion.

Accordions also use several ARIA attributes so assistive technologies can recognize and behave accordingly to these elements. In case of the links accordions, if these are opened, an aria-label attribute will appear telling the user how many links are inside it so they can determine beforehand wether it's worth navigating though it or closing it and skip it entirely.

Types[]

Text[]

The default accordion type. Despite being called text, this is the accordion variant where you can put any kind of content in its panel; such as images, tables, other templates, and more. You can even nest a second accordion inside (although doing more than two nested accordions is discouraged as it leads to unnecessarily complicated page layouts and can be confusing to navigate even with all the UI/UX considerations taken into account).

An example of this type of accordion is the following:

Show/Hide code

{{Accordion
| animation-duration = 250
| accordion-1-title    = Lorem ipsum text
| accordion-1-contents = Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis et risus eget est laoreet vehicula. Suspendisse et lobortis leo. Donec mollis tincidunt diam in porta. Maecenas commodo neque eget ipsum auctor, sed luctus metus convallis. Donec quam dolor, euismod sed odio sit amet, dignissim egestas lorem. Nulla quis tincidunt nisl, at dictum velit. Duis sed dui suscipit nulla facilisis vulputate in sed eros. Aenean sagittis feugiat turpis sed fringilla. Curabitur volutpat leo placerat mauris mattis aliquam. Vestibulum vel egestas eros, a vulputate lectus. Nullam eget porta metus.
| accordion-2-title    = Content with images and a list
| accordion-2-contents = '''Getting lost'''
[[File:Example.jpg|thumb|right]]
After the first few days of work, the player should have some basic facilities for survival (e.g. farms, a shelter, and a mine). Many players are tempted at this point to venture farther from their base to look for resources and explore.

However, the player should always keep in mind the location of their base. Even a brief moment of activity in an unfamiliar place, especially areas with no landmarks, can confuse a player's sense of direction and result in losing the way home. Without knowing where the base is, the player is in danger of losing valuable time and may have to start over most of the game. It is also much easier to die trying to get back, either from starvation or attacks by hostile mobs.

<div style="clear: both;"></div>
Here are some orientation tips:

* Coordinate notation: Coordinates can be displayed in the game settings without enabling cheats.‌[Bedrock Edition only] The player can also record their base's coordinates from the Debug screen‌[Java Edition only] (this is done through F3 or Fn + F3, depending on BIOS settings). The coordinates are also reported when the player teleports using /teleport @s ~ ~ ~, and also copied to the clipboard in the form of /teleport when F3 + C is pressed, if cheats are enabled. A screenshot can be used or writing down, but the coordinates should be kept in a secure place. If the player does not want to write it down in real life or take a screenshot, they can craft a book and quill and write the coordinates of their home down there.

* Lit landmark: Perhaps for smaller distances, one can build tall towers with some torches on the top while traveling, as well as placing one on top of their house. Keep in mind that the towers can be seen only if one's render distance is high enough. A beacon can also be used for this purpose, although a beacon is unobtainable for new players in survival mode. Alternatively, place a torch on the side of a block indicating the direction to the nearest safe haven.

* On grassy earth, mark arrows by digging path squares with a shovel, or use the shovel on grass to make grass path blocks every few paces to mark your way.

* Keeping a running list of important coordinates is recommended.

[[File:Example.jpg|thumb|center|Lorem ipsum dolor sit amet.]]
| accordion-3-title    = Example with table
| accordion-3-contents = Lorem ipsum

{{{!}} class="wikitable"
{{!}}+ Caption text
{{!}}-
! Header text
! Header text
! Header text
{{!}}-
{{!}} Example {{!}}{{!}} Example {{!}}{{!}} Example
{{!}}-
{{!}} Example {{!}}{{!}} Example {{!}}{{!}} Example
{{!}}-
{{!}} Example {{!}}{{!}} Example {{!}}{{!}} Example
{{!}}}

Dolor sit amet.

| accordion-4-title    = Example with fixed elements
| accordion-4-contents =
<div style="width: 100px; height: 100px; background-color: orange; position: fixed; bottom: 64px; left: 64px;"></div>
<div style="width: 200px; height: 100px; background-color: blue; position: fixed; bottom: 64px; right: 64px;"></div>
<div style="width: 100px; height: 200px; background-color: green; position: fixed; bottom: 64px; left: calc(50vw - 160px);"></div>
| accordion-5-title    = Nested text accordion
| accordion-5-contents = {{Accordion
| accordion-1-title    = Header 1
| accordion-1-contents = Panel 1
| accordion-2-title    = Header 2
| accordion-2-contents = Panel 2
| accordion-3-title    = Header 3
| accordion-3-contents = Panel 3
}}
| accordion-6-title    = Nested links accordion
| accordion-6-contents = {{Accordion
| type = links
| accordion-1-title    = Header 1
| accordion-1-link-1   = [[Project:Sandbox|Sandbox]]
| accordion-2-title    = Header 2
| accordion-2-link-1   = [[Project:Sandbox|Sandbox]]
| accordion-2-link-2   = [[Project:Sandbox|Sandbox]]
| accordion-2-link-3   = [[Project:Sandbox|Sandbox]]
| accordion-3-title    = Header 3
| accordion-3-link-1   = [[Project:Sandbox|Sandbox]]
| accordion-3-link-2   = [[Project:Sandbox|Sandbox]]
| accordion-3-link-3   = [[Project:Sandbox|Sandbox]]
| accordion-3-link-4   = [[Project:Sandbox|Sandbox]]
| accordion-3-link-5   = [[Project:Sandbox|Sandbox]]
}}
}}

Results in:

Lorem ipsum text
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis et risus eget est laoreet vehicula. Suspendisse et lobortis leo. Donec mollis tincidunt diam in porta. Maecenas commodo neque eget ipsum auctor, sed luctus metus convallis. Donec quam dolor, euismod sed odio sit amet, dignissim egestas lorem. Nulla quis tincidunt nisl, at dictum velit. Duis sed dui suscipit nulla facilisis vulputate in sed eros. Aenean sagittis feugiat turpis sed fringilla. Curabitur volutpat leo placerat mauris mattis aliquam. Vestibulum vel egestas eros, a vulputate lectus. Nullam eget porta metus.
Content with images and a list
Getting lost
Example

After the first few days of work, the player should have some basic facilities for survival (e.g. farms, a shelter, and a mine). Many players are tempted at this point to venture farther from their base to look for resources and explore.

However, the player should always keep in mind the location of their base. Even a brief moment of activity in an unfamiliar place, especially areas with no landmarks, can confuse a player's sense of direction and result in losing the way home. Without knowing where the base is, the player is in danger of losing valuable time and may have to start over most of the game. It is also much easier to die trying to get back, either from starvation or attacks by hostile mobs.

Here are some orientation tips:

  • Lit landmark: Perhaps for smaller distances, one can build tall towers with some torches on the top while traveling, as well as placing one on top of their house. Keep in mind that the towers can be seen only if one's render distance is high enough. A beacon can also be used for this purpose, although a beacon is unobtainable for new players in survival mode. Alternatively, place a torch on the side of a block indicating the direction to the nearest safe haven.
  • On grassy earth, mark arrows by digging path squares with a shovel, or use the shovel on grass to make grass path blocks every few paces to mark your way.
  • Keeping a running list of important coordinates is recommended.
Example

Lorem ipsum dolor sit amet.

Example with table
Lorem ipsum
Caption text
Header text Header text Header text
Example Example Example
Example Example Example
Example Example Example
Dolor sit amet.
Example with fixed elements
Nested text accordion
Header 1
Panel 1
Header 2
Panel 2
Header 3
Panel 3
Nested links accordion


Links[]

In this types of accordion you only should list links for the user to click. It works more as a navigational menu than anything else. It accepts any kind of wikitext link (wether it's from the same wiki, interwiki, or an external link).

An example of this type of accordion is the following:

Show/Hide code

{{Accordion
| type = links
| accordion-1-title    = Header 1
| accordion-1-link-1   = [[JumpToContent]]
| accordion-1-link-2   = [[JumpToContent]]
| accordion-2-title    = Header 2
| accordion-2-link-1   = [[Grid|CSS-only grid]]
| accordion-3-title    = Header 3
| accordion-3-link-1   = [[:wikipedia:Cat|Cats' Wikipedia article]]
| accordion-3-link-2   = [[:w:Help:Color|Understanding color]]
| accordion-3-link-3   = [[:w:hk:Pure Vessel|An easy enemy]]
| accordion-3-link-4   = [https://t.co/elon Elon Musk's Twitter]
| accordion-3-link-5   = [https://blog.youtube YouTube's blog]
| accordion-3-link-6   = [[Special:Random|Random page]]
}}

Results in:


API[]

HTML elements[]

Note that you don't have to write any HTML in order to make this script work, but you may want to know the purpose of each generated element.

HTML element Description
<div class="accordions__wrapper"></div>
Mandatory. Element that wraps all accordions.
<section class="accordion" id="accordion-n"></section>
Mandatory. Accordion element that contains the header and the panel.
<div class="accordion--header"></div>
Mandatory. Header element that works as a button.
<div class="accordion--panel"></div>
Mandatory. Panel element that holds the accordion's contents.
<svg class="accordion__icon"></svg>
Optional. Indcates the state of the header (wether its expanded or not).

CSS classes[]

Some CSS classes are specfic to a type of accordion, so you are free to give custom styles to each type accordingly if needed. You can always style both types at the same time by not using the type name in the class.

CSS class Target Description
.accordion__wrapper
Wrapper element Mandatory. Selects the wrapper element of all accordions.
.upgraded__accordion
Mandatory. Ensures some behavior given after the JavaScript updates the HTML structure of the accordion.
.is-animated
Optional. Allows transitions and animations to be played in all accordions.
.accordion
Accordion Mandatory. Selects all accordions.
.accordion__text
Mandatory (if accordion type is text). Selects all text-type accordions.
.accordion__links
Mandatory (if accordion type is links). Selects all link-type accordions.
.accordion--header
Accordion header Mandatory. Selects the accordion's header.
.accordion__text--header
Mandatory (if accordion type is text). Selects the text-type accordion's header.
.accordion__links--header
Mandatory (if accordion type is links). Selects the link-type accordion's header.
.accordion--panel
Accordion panel Mandatory. Selects the accordion's panel.
.accordion__text--panel
Mandatory (if accordion type is text). Selects the text-type accordion's panel.
.accordion__links--panel
Mandatory (if accordion type is links). Selects the link-type accordion's panel.
.accordion__icon
Header icon Optional. Selects all types of header icons.
.accordion__icon--arrow
Mandatory (if the header has a "arrow" icon). Selects the "arrow" icon.
.accordion__icon--plus
Mandatory (if the header has a "plus" icon and there are nested accordions). Selects the "plus" icon.
.accordion__icon--plus-h
Header "plus" icon Optional. Selects the horizontal line from the "plus" icon.
.accordion__icon--plus-v
Optional. Selects the vertical line from the "plus" icon.

CSS variables[]

Custom properties that allows you to quickly customize some aspects of the component. You can use these on the .accordion element.

CSS variable Description
--accordion--background-color Modifies accordions' background color (does not affect the background color of the text-type accordion's header).
--accordion--border-color Modifies accordions' border color.
--accordion__header--background-color Modifies text-type accordion's header background color.
--accordion__header--background-color--hover Modifies text-type accordion's header background color on hover/focus.
--accordion__links--background-color Modifies links-type accordion's header background color.
--accordion__links--background-color--hover Modifies links-type accordion's header background color on hover/focus.
--accordion__links--border-radius Modifies links-type accordions' border radius.
--accordion-icon-color--light Modifies header icon's color on light theme.
--accordion-icon-color--dark Modifies header icon's color on dark theme.

A CSS rule using all available variables looks like this:

.accordion {
  --accordion-background-color: (background-color-here);
  --accordion-border-color: (border-color-here);
  --accordion-header-background-color: (header-background-color-here);
  --accordion-header-background-color--hover: (header-background-color-on-hover-here);
  --accordion-link-list-background-color: (link-list-background-color-here);
  --accordion-link-list-background-color--hover: (link-list-background-color-on-hover-here);
  --accordion-arrow-icon-color--light: (filter-values-here);
  --accordion-arrow-icon-color--dark: (filter-values-here);
}
Advertisement