Hey! Look what we can do with the <details> tag!
The markdown version of this
[details="Summary"]
This text will be hidden
[/details]
doesn’t work, though…only HTML.
19 Likes
Nice! Look good on Pages as well?
It’s ideal for FAQ lists 
10 Likes
Nice!
That saves a lot of USC syncs!
1 Like
Please do share the Rich Text Used here.
The template for each set of Questions & Answers looks like so:
<details>
<summary style="padding: 10px 10px 10px 10px;
background-color: #245dd1;
border: none;
border-radius: 20px;
color: #fff;
box-shadow: 1px 1px 2px #bbbbbb;
cursor: pointer;
font-size: 120%;">{q}</summary>
<p>
<p style="background-color: #eeeeee;
padding: 10px 10px 10px 10px;
margin: 0;
border-radius: 20px;
box-shadow: 1px 1px 2px #bbbbbb;">
{a}
</details>
<p>
Replacements are used for {q} (Question) and {a} (Answer).
In the table, there is one row for each set of Q&A.
A joined list (with a null separator) is used to pull all the templates into a single column, and the joined list is used as the source of a Rich Text component.
12 Likes
Hi I’m trying to build exactly this, but can’t figure out some of the details. I also have a table that has columns Question and Answer for my FAQ.
However, I’m stuck on the following :
Replacements are used for
{q}(Question) and{a}(Answer).
What are “replacements” and how do I use them?
A joined list (with a null separator) is used to pull all the templates into a single column, and the joined list is used as the source of a Rich Text component.
Do you mean that you use this <details> block as the text in your FAQ table, then use that table as the source for a Rich Text component?
Thank you.
aha I was able to figure this out - the solution is to format the full HTML in your Rich Text component. What you end up with is an un-human-readable Rich Text component that does however render beautifully in the app. The basic structure for each item is given above, and you replace the whole {q} and {a} with your question and answer text respectively.
I would strongly recommend setting this up in a separate text editor, since the Rich Text component does not display line breaks. (I would also recommend setting up only one Q&A item to test styling before copying it for all the rest.)
Once you have the first item set up, you repeat this whole <details>...</details> section for each Q&A item that you want to display.
That shouldn’t be necessary. The idea is to configure it once, use the Joined List column to join the template column from all rows together, then display the joined list column in a single rich text component. If you do that correctly, then the whole thing becomes fully dynamic - meaning that as new sets of Q&A are added to the table, they will automatically appear.
That said, I see from your other thread that you have a working solution using a Custom Collection. Using a Custom Collection is probably a better option, as it allows you to have individual items clickable, which isn’t possible with this solution.
1 Like