# Markdown to formatted FAQ?

**URL:** <https://discourse.gohugo.io/t/markdown-to-formatted-faq/26799>\
**Category:** support\
**Created:** [July 8, 2020, 3:41pm UTC](https://discourse.gohugo.io/t/markdown-to-formatted-faq/26799 "2020-07-08T15:41:07Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![AndyM](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/andym/32/11725_2.png) [@AndyM](https://discourse.gohugo.io/u/AndyM)\
**Post date:** [July 8, 2020, 3:41pm UTC](https://discourse.gohugo.io/t/markdown-to-formatted-faq/26799/1 "2020-07-08T15:41:07Z")

</div>

I have been asked to add a FAQS to several pages, but also make it so the sections are collapsable. Although I could hard code this in HTML, I would rather avoid doing this and instead have it specified in a Markdown document and then have it transformed.

What I had considered doing is adding a content section “content/faq” and then adding the individual FAQs as markdown formatted docs in that page. Then the markdown could be included and processed as appropriate.

An example markdown I had considered:

```
### This is a question

This is an answer,

  - list A
  - list B

### This is another question

This is another answer

```

With the output being something along the lines:

```
<div class="faq-entry">
  <div class="faq-entry-question">This is another question</div>
  <div class="faq-entry-answer">This is another answer</div>
</div>

```

Could this approach work, and if so how could I include and transform it? If not, what other suggestions are there?

---

<div class="post-metadata">

**Author:** ![sephore](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/sephore/32/11673_2.png) [@sephore](https://discourse.gohugo.io/u/sephore)\
**Post date:** [July 8, 2020, 4:05pm UTC](https://discourse.gohugo.io/t/markdown-to-formatted-faq/26799/2 "2020-07-08T16:05:59Z")

</div>

Using markdown, the best approach I can think right now is to use a definition list:

```auto
Question
: Answer

Question
: Answer

Question
: Answer

```

It would be rendered as:

```auto
<dl>
<dt>Question</dt>
<dd>Answer</dd>
<dt>Question</dt>
<dd>Answer</dd>
<dt>Question</dt>
<dd>Answer</dd>
</dl>

```

Throw some style on it and it should work.

Or, ~~if you’re a masochist like myself,~~ you can use definition lists AND `replaceRE` in your content:

```auto
{{ $replaceDL := printf "%s${1}%s" "<div class=\"faq-entry\">" "</div>" }}
{{ $replaceDT := printf "%s${1}%s" "<div class=\"faq-entry-question\">" "</div>" }}
{{ $replaceDD := printf "%s${1}%s" "<div class=\"faq-entry-answer\">" "</div>" }}

{{ .Content | replaceRE "(?:(?:<dl>)((?:.|\n)+?))(?:</dl>)" $replaceDL | replaceRE "(?:(?:<dt>)((?:.|\n)+?))(?:</dt>)" $replaceDT | replaceRE "(?:(?:<dd>)((?:.|\n)+?))(?:</dd>)" $replaceDD | safeHTML }}

```

And you should get:

```auto
<div class="faq-entry">
<div class="faq-entry-question">Question</div>
<div class="faq-entry-answer">Answer</div>
<div class="faq-entry-question">Question</div>
<div class="faq-entry-answer">Answer</div>
<div class="faq-entry-question">Question</div>
<div class="faq-entry-answer">Answer</div>
</div>

```

---

<div class="post-metadata">

**Author:** ![AndyM](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/andym/32/11725_2.png) [@AndyM](https://discourse.gohugo.io/u/AndyM)\
**Post date:** [July 8, 2020, 5:01pm UTC](https://discourse.gohugo.io/t/markdown-to-formatted-faq/26799/3 "2020-07-08T17:01:40Z")

</div>

The one issue I have here is that I am not sure how add list items and paragraphs to items in definition section. In the mean time I’ll play around with what you shared.

---

<div class="post-metadata">

**Author:** ![sephore](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/sephore/32/11673_2.png) [@sephore](https://discourse.gohugo.io/u/sephore)\
**Post date:** [July 8, 2020, 5:09pm UTC](https://discourse.gohugo.io/t/markdown-to-formatted-faq/26799/4 "2020-07-08T17:09:16Z")

</div>

```auto
Question
: Answer

  Paragraph
  - list A
  - list B

Question
: Answer

```

I’m no markdown expert. Maybe someone else can guide you further.

---

<div class="post-metadata">

**Author:** ![davidsneighbour](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/davidsneighbour/32/24507_2.png) [@davidsneighbour](https://discourse.gohugo.io/u/davidsneighbour)\
**Post date:** [July 8, 2020, 5:42pm UTC](https://discourse.gohugo.io/t/markdown-to-formatted-faq/26799/5 "2020-07-08T17:42:08Z")

</div>

heyhey, not sure if that helps you, but this is how I added FAQs to one of my sites:

I created a shortcode. Obviously.

In the `page.md` I add:

```auto
{{< faq title="What accomodation is available?" >}}
... answer ...
{{< / faq >}}

{{< faq title="What size are the groups on this tour?" >}}
... answer ...
{{< / faq >}}

```

In `layouts/shortcodes/faq.html`:

```auto
<div class="mb-4 faq">
<h3>{{ with .Get "title" }}{{ . }}{{ end }}</h3>
<div class="faq-answer">
{{ .Inner | markdownify }}
</div>
</div>

```

You can use Javascript for any kind of collapsible script using the `.faq-answer` class.

Now, having done that, you could [add structured data](https://developers.google.com/search/docs/data-types/faqpage) to your shortcode to excel in the SEO department. Something I am planning for a while but not having time to 😉

---

<div class="post-metadata">

**Author:** ![vendelin](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/vendelin/32/11243_2.png) [@vendelin](https://discourse.gohugo.io/u/vendelin)\
**Post date:** [July 8, 2020, 6:30pm UTC](https://discourse.gohugo.io/t/markdown-to-formatted-faq/26799/6 "2020-07-08T18:30:17Z")

</div>

Is the FAQ a standalone page?

If yes, you can define a custom content/page type, pick two tags to sacrifice, and bend them beyond recognition in custom CSS to your needs. If you need to wrap each Q/A pair in a block element, you can use `>` for that (translates into `<blockquote>`).

That’s ugly, but allows to avoid shortcodes in Markdown.

---

<div class="post-metadata">

**Author:** ![jmooring](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/jmooring/32/4214_2.png) [@jmooring](https://discourse.gohugo.io/u/jmooring)\
**Post date:** [July 8, 2020, 6:35pm UTC](https://discourse.gohugo.io/t/markdown-to-formatted-faq/26799/7 "2020-07-08T18:35:31Z")

</div>

Conceptually, a FAQ is just another type of content:

```auto
content/
└── faq
    ├── how-to-bake-a-cake.md
    ├── how-to-ride-a-bike.md
    └── why-is-the-sky-blue.md

```

This approach allows you to tag and categorize (taxonomies), provide metadata (front matter), display a subset (using `where`), control the order in which they are displayed, make a few of them “sticky” at the top of lists, etc.

If you only have a handful of FAQs on the site, this approach is probably overkill, but it is largely future proof due to its extensibility.

---

<div class="post-metadata">

**Author:** ![vendelin](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/vendelin/32/11243_2.png) [@vendelin](https://discourse.gohugo.io/u/vendelin)\
**Post date:** [July 8, 2020, 6:55pm UTC](https://discourse.gohugo.io/t/markdown-to-formatted-faq/26799/8 "2020-07-08T18:55:54Z")

</div>

I would make it a bit more elaborate instead, as it is a perfect case for page bundle resources. Just add `index.md` and loop through page resources. Or add `_index.md`, and make it a section. That’s what it is usually called, the FAQ _section_.

If a single FAQ page doesn’t have to sit in a single file, of course.