How to hide document viewer field once opened?

You create a second link that saves "null()" back into your local variable.  I would suggest you name that variable "local!selectedDocId" instead of "local!link", because "local!link" is misleading among other things.

You create a second link that saves "null()" back into your local variable.  I would suggest you name that variable "local!selectedDocId" instead of "local!link", because "local!link" is misleading among other things.

would that second link go inside a!linkField ?

I recommend never using a!linkField - you should only use a!richTextDisplayField.  And yes, the second link would go there.

As an example I've rewritten your above code in my own "style"; here we get a list of all documents provided each as their own link, and clicking any of them will open that document in the viewer field below (notice you can click a second document and it will open that one instead).

a!localVariables(
  local!documents: {47149, 47150},
  local!selectedDocId,
  
  a!sectionLayout(
    label: "Section",
    contents: {
      a!richTextDisplayField(
        value: {
          a!forEach(
            items: local!documents,
            expression: {
              a!richTextItem(
                text: "View Document: " & document(fv!item, "name"),
                link: a!dynamicLink(
                  showWhen: tointeger(local!selectedDocId) <> fv!item,
                  saveInto: {
                    a!save(local!selectedDocId, fv!item)
                  }
                )
              ),
              if(fv!isLast, "", char(10))
            }
          )
        }
      ),
      
      a!documentViewerField(
        label: "Selected Document",
        document: local!selectedDocId,
        showWhen: not(isnull(local!selectedDocId)),
      ),
      a!richTextDisplayField(
        showWhen: not(isnull(local!selectedDocId)),
        value: a!richTextItem(
          text: "Hide",
          link: a!dynamicLink(
            saveInto: {
              a!save(
                local!selectedDocId,
                null()
              )
            }
          )
        )
      )
    }
  )
)

Also as a side note, with the Rich Text Display Field, you can do more advanced things based on the selected document ID like changing the formatting of the row(s), hiding the link on the currently-selected row, using different icons, etc.

Why would I not use a  a!linkField compared to a a!richTextDisplayField? Is it for aesthetic/more functionality reasons?

Also I was hoping you can explain line 22, is that meant for formatting?

The most important reason to not use a!linkField() is that it has no way of conditionally displaying its link or not.  For this reason plus all the benefits offered by the Rich Text field, my recommendation to everyone is to never use it unless there's an absolute need (which probably doesn't exist).

Line 22 inserts a linebreak (char(10)), otherwise all links would appear on the same row (you can comment out that line temporarily and see what happens).  It does this for all but the last instance, hence the if() condition around fv!isLast.

That makes sense! I noticed that the "Hide" dynamic link was created to hide the field, is it possible to have the same dynamic link (That opens the document view field) to also close the document viewer field? Or is that something that would be more complex than having a "hide" dynamic link?

Yes, you can do that too - either in combination with the separate link or instead of, depending on what you particularly want.

Here's an alternative approach to the above code where we alternate between an "open" or a "hide" version of the link depending on whether the current row is the selected document.  (It still also shows the "Hide" link below the open document, but you can just get rid of this if you want.)

a!localVariables(
  local!documents: {47149, 47150},
  local!selectedDocId,

  a!sectionLayout(
    label: "Section",
    contents: {
      a!richTextDisplayField(
        value: {
          a!forEach(
            items: local!documents,
            expression: {
              a!richTextItem(
                showWhen: tointeger(local!selectedDocId) <> fv!item,
                text: {
                  document(fv!item, "name"), " ",
                  a!richTextIcon(icon: "search-plus", color: "POSITIVE", caption: "View")
                },
                link: a!dynamicLink(
                  saveInto: {
                    a!save(local!selectedDocId, fv!item)
                  }
                )
              ),
              a!richTextItem(
                showWhen: tointeger(local!selectedDocId) = fv!item,
                text: {
                  document(fv!item, "name"), " ",
                  a!richTextIcon(icon: "search-minus", color: "NEGATIVE", caption: "Hide")
                },
                link: a!dynamicLink(
                  saveInto: {
                    a!save(local!selectedDocId, null())
                  }
                )
              ),
              if(fv!isLast, "", char(10))
            }
          )
        }
      ),

      a!documentViewerField(
        label: "Selected Document",
        document: local!selectedDocId,
        showWhen: not(isnull(local!selectedDocId)),
      ),
      
      a!richTextDisplayField(
        showWhen: not(isnull(local!selectedDocId)),
        value: a!richTextItem(
          text: "Hide",
          link: a!dynamicLink(
            saveInto: {
              a!save(
                local!selectedDocId,
                null()
              )
            }
          )
        )
      )
    }
  )
)

Oh wow, that's really cool! :) 

Always something new to learn. 

Thank you so much for answering my questions! I really appreciate it.