Accordion5.fwaction (2020-02-02) (Downloaded 13 times)
Compatible: Pro 7
Author: Walter Davis
display: none, screen readers and other assistive devices (and Google) can see them and understand what they are.
To use, apply the Accordion5 Page Action to your page, and set the options you want to use there:
Next, draw or insert an HTM box that will hold all of the segments of your accordion. Apply the Accordion5 Element Action to this box. Choose which heading level you will use for your Accordion headers. These elements will be converted to the
<summary> tag inside each
<details> element, so you can ignore any styling that Freeway gives an
<h2> or whichever heading you choose.
Insert another HTML box inline within the box you just created. This will become your first accordion segment. Double-click into this element, and type some text for the heading. Type a return, and then type some more text as the details about that heading. You may style this text as you like, or you can leave it plain, and set your styles later when we add the global styles. Select the first line (the heading) and click on the h2 (or h3 or h4, if you selected one of those in the previous step) in the Styles palette. Finally, set the inline box to be Available width and Flexible height in the Inspector. Finally, copy this box to the clipboard, double-click in its parent HTML box so you have a text cursor, and paste enough copies of it to fill in your accordion structure.
Now you can edit the elements until they have your desired headings and content. Preview in a browser, and you should see all of the headings, and none of the details. Each heading will have a little ▶︎ next to it, which pivots to become a ▼ when you click the heading (also revealing the details).
To style the headings and details, you need to add two or three permanent styles to your document, using the Edit Styles dialog. You will need to pay particular care when adding these that they do not have names, only tags. Freeway is very helpful, and will keep trying to sneak a name into the interface, unless you tab into the Name field, delete what is there, and tab back out.
summary This is the style that controls what the headings look like. Use the font and style attributes to make the headings look how you like them. Use the Extended dialog to add
cursor: pointer to this style, so the mouse will change to make it look “clickable” in a desktop browser. Whatever color you choose here will carry over to the disclosure triangles.
details This is the font style that will govern how the revealed details look when the heading is toggled. You can choose fonts, color, size, whatever, and this will apply to all of the details in all accordions on the page. You can also use the borders and background colors and padding and margins in this style, to govern how each element will relate to its neighbors.
summary:focus Some browsers will draw a bold blue border box around the heading whenever it is clicked. This is an affordance for visitors who are using keyboard controls or other assistive devices, so they can see which heading is selected, and open or close the details with a click of the Return key. You may want to change the way this selection looks – perhaps substitute a background color or shadow or a different outline, or remove the effect altogether with
outline: none. You will need to use the Extended dialog to enter that.
Note carefully: these styles are not meant to be applied to elements or text in your page. You add them to your Styles palette, and you leave them there. The Action will apply the necessary tags to the elements you apply them to so that these styles have effect. This is not WYSIWYG, you have to proof your work in a browser.
Special thanks to Bill Jordan, who sponsored development of this Action!