Foldable Text in Quarto

Question

I'm trying to add a foldable abstract box to my Quarto website. It seems like this functionality exists for code and I'm hoping to add a button after my publications where if clicked will unfold the abstract. Is there something else this would be called? Part of my issue is I don't know the right phrases to be searching for my digging.

Here's a small demo .qmd:

--- title: "Research" --- ### Publications ------------------------------------------------------------------------ #### 2022 Authors. Year. ["Title".](https://stackoverflow.com/) *Journal* <br> Authors. Year. ["Title".](https://stackoverflow.com/) *Journal* <br> #### 2023 ### Work In Progress ---

One easy alternative could be using Callout Blocks where block title would be "Publications" — Shafee
– Shafee, Commented Aug 1, 2023 at 15:21

Till · Accepted Answer · 2023-08-01 15:27:46Z

The web framework bootstrap, which Quarto uses for HTML files calls this Collapse. There is a github discussion in the quarto-dev repo. I adjusted the example provided there to provide the functionality you want.

--- title: "Research" --- ### Publications ------------------------------------------------------------------------ #### 2022 Authors. Year. ["Title".](https://stackoverflow.com/) *Journal* <a data-bs-toggle="collapse" data-bs-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample"> Show Abstract </a> <br> <div class="collapse" id="collapseExample"> <div class="card card-body"> Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger. </div> </div> Authors. Year. ["Title".](https://stackoverflow.com/) *Journal* <br>

You can wrap this in a function that creates a single entry with collapsed abstract. That way you don't have to insert the HTML directly into your qmd file.

--- title: "Research" --- ### Publications --- #### 2022 ```{r} #| results: asis library(tidyverse) library(glue) df <- tibble(authors = words[1:3], year = 2012:2014, title = words[4:6], abstract = words[7:9]) add_lit_entry <- function(data) { glue('<span>{data$authors}. {data$year}. {data$title}.</span> <a data-bs-toggle="collapse" data-bs-target="#collapse{data$title}" aria-expanded="false" aria-controls="collapseExample"> Show Abstract </a> <div class="collapse" id="collapse{data$title}"> <div class="card card-body"> {data$abstract} </div> </div><br>') |> print() } df |> split(1:nrow(df)) |> walk(add_lit_entry) ```

"You can wrap this in a function that creates a single entry with collapsed abstract." How do I use/call this function?
The second example in my answer demonstrates how to do that. I recommend creating a qmd file with the content of that example and adjust things from there.

Collectives™ on Stack Overflow

Foldable Text in Quarto

1 Answer 1

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Related