# ▶ Accordion Text using inline HTML

**URL:** https://community.glideapps.com/t/accordion-text-using-inline-html/56643
**Category:** Community Resources
**Tags:** custom-code
**Created:** [January 13, 2023, 1:48am UTC](https://community.glideapps.com/t/accordion-text-using-inline-html/56643 "2023-01-13T01:48:15Z")
**Posts on this page:** 11
**Page:** 1

<div class="post-metadata">

### Author: ![Robert\_Petitto](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/robert_petitto/32/25193_2.png) [@Robert\_Petitto](https://community.glideapps.com/u/Robert_Petitto)
#### Post date: [January 13, 2023, 1:48am UTC](https://community.glideapps.com/t/accordion-text-using-inline-html/56643/1 "2023-01-13T01:48:15Z")

</div>

Hey! Look what we can do with the `<details>` tag!

The markdown version of this

```auto
[details="Summary"]
This text will be hidden
[/details]

```

doesn’t work, though…only HTML.

![CleanShot 2023-01-12 at 20.41.37](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/a/f/aff68103cade35b2e2499fcecf01a55e550e3792.gif)

---

<div class="post-metadata">

### Author: ![Joe\_Gabriele](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/joe_gabriele/32/57595_2.png) [@Joe\_Gabriele](https://community.glideapps.com/u/Joe_Gabriele)
#### Post date: [January 13, 2023, 1:50am UTC](https://community.glideapps.com/t/accordion-text-using-inline-html/56643/2 "2023-01-13T01:50:29Z")

</div>

Nice! Look good on Pages as well?

---

<div class="post-metadata">

### Author: ![gvalero](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/gvalero/32/1037_2.png) [@gvalero](https://community.glideapps.com/u/gvalero)
#### Post date: [January 13, 2023, 2:05am UTC](https://community.glideapps.com/t/accordion-text-using-inline-html/56643/3 "2023-01-13T02:05:48Z")

</div>

Hola!

yes, it will work on Pages as well.

Here another example…

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/9/9/99048999976ba1f5621e55daeab5c27e52f37ae9.png)

---

<div class="post-metadata">

### Author: ![Darren\_Murphy](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/darren_murphy/32/47326_2.png) [@Darren\_Murphy](https://community.glideapps.com/u/Darren_Murphy)
#### Post date: [January 13, 2023, 2:32am UTC](https://community.glideapps.com/t/accordion-text-using-inline-html/56643/4 "2023-01-13T02:32:16Z")

</div>

It’s ideal for FAQ lists 🙂

---

<div class="post-metadata">

### Author: ![Gregory](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/gregory/32/21180_2.png) [@Gregory](https://community.glideapps.com/u/Gregory)
#### Post date: [January 13, 2023, 10:13am UTC](https://community.glideapps.com/t/accordion-text-using-inline-html/56643/5 "2023-01-13T10:13:43Z")

</div>

Nice!  
That saves a lot of USC syncs!

---

<div class="post-metadata">

### Author: ![Spark](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/spark/32/76661_2.png) [@Spark](https://community.glideapps.com/u/Spark)
#### Post date: [April 4, 2023, 5:04pm UTC](https://community.glideapps.com/t/accordion-text-using-inline-html/56643/6 "2023-04-04T17:04:03Z")

</div>

Please do share the Rich Text Used here.

---

<div class="post-metadata">

### Author: ![Darren\_Murphy](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/darren_murphy/32/47326_2.png) [@Darren\_Murphy](https://community.glideapps.com/u/Darren_Murphy)
#### Post date: [April 4, 2023, 5:10pm UTC](https://community.glideapps.com/t/accordion-text-using-inline-html/56643/7 "2023-04-04T17:10:26Z")

</div>

The template for each set of Questions & Answers looks like so:

```auto
<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.

---

<div class="post-metadata">

### Author: ![mhsu\_pw](https://avatars.discourse-cdn.com/v4/letter/m/a4c791/32.png) [@mhsu\_pw](https://community.glideapps.com/u/mhsu_pw)
#### Post date: [September 7, 2023, 10:33pm UTC](https://community.glideapps.com/t/accordion-text-using-inline-html/56643/8 "2023-09-07T22:33:29Z")

</div>

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.

---

<div class="post-metadata">

### Author: ![Robert\_Petitto](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/robert_petitto/32/25193_2.png) [@Robert\_Petitto](https://community.glideapps.com/u/Robert_Petitto)
#### Post date: [September 7, 2023, 11:10pm UTC](https://community.glideapps.com/t/accordion-text-using-inline-html/56643/9 "2023-09-07T23:10:14Z")

</div>

Take a look:

---

<div class="post-metadata">

### Author: ![mhsu\_pw](https://avatars.discourse-cdn.com/v4/letter/m/a4c791/32.png) [@mhsu\_pw](https://community.glideapps.com/u/mhsu_pw)
#### Post date: [September 14, 2023, 10:23pm UTC](https://community.glideapps.com/t/accordion-text-using-inline-html/56643/10 "2023-09-14T22:23:51Z")

</div>

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.

---

<div class="post-metadata">

### Author: ![Darren\_Murphy](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/darren_murphy/32/47326_2.png) [@Darren\_Murphy](https://community.glideapps.com/u/Darren_Murphy)
#### Post date: [September 15, 2023, 1:06am UTC](https://community.glideapps.com/t/accordion-text-using-inline-html/56643/11 "2023-09-15T01:06:24Z")

</div>

> [@mhsu\_pw](#):
>
> 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.
