Search code examples
htmlcssrr-markdown

Add many hidden items to html TOC using rmarkdown


I am trying to build in a list of hyperlinks to an html table of contents using rmarkdown. I don't want the list to appear in my html document. I found a useful way to hide these 'headers' in the document using a little css tidbit. This works well when I manually input information, see below. But when I try to use r to print headers (say a few hundred) they do not appear at all. It really seems like this should work.

How can I print those headers (hundreds) into the document, keep them hidden, and have them appear as hyperlinks in the TOC? In this example there are only 3...

Desired output is just like the image below but with many many more hyperlinks generated, ideally, from a data frame of a list of specie and a list of links, as in the code below.

Note, the code below produces both the manual solution and the problem.

---
title: "...my only..."
subtitle: "...hope..."
author: "CAWA"
output: 
  html_document:
    toc: true
    toc_float: true
---


```{css, echo=FALSE}
.hidden-toc {
  display: none;
}  
```

# HI

## Hello AGAIN

# HELLOOOO

### SO, HI AGAIN!  

<div class="hidden-toc">
# Jump to Species {#custom-section}
## [species1](mypage.org) 
## [species1](mypage.org)  

<!-- these two species are added to the TOC wile staying hidden in the document. good.-->
<!-- this next code chunk should print items with the same structure, hide them, and include them in the TOC, but this does not happen  -->

```{r,echo=FALSE, include=FALSE, results='asis'}
# Create hidden TOC items from the data frame
library(dplyr)
html.sp.listx <- data.frame(
  species = c("Species A", "Species B", "Species C"),
  html = c("https://example.com/species-a", "https://example.com/species-b", "https://example.com/species-c")
)

# Create hidden TOC items from the data frame with hyperlinks
hidden_toc_items <- html.sp.listx %>%
  mutate(toc_item =paste0("## [",species,"]", "(",html,")"))%>%
  pull(toc_item)

# Print the hidden TOC items within a div with the 'hidden-toc' class

cat(paste(hidden_toc_items, collapse = "\n"))
```

</div>

enter image description here


Solution

  • Your solution works, but the links are not showing up because the output from the chunk is not being included due to include=FALSE. Change this to include=TRUE:

    ---
    title: "...my only..."
    subtitle: "...hope..."
    author: "CAWA"
    output: 
      html_document:
        toc: true
        toc_float: true
    ---
    
    
    ```{css, echo=FALSE}
    .hidden-toc {
      display: none;
    }  
    ```
    
    # HI
    
    ## Hello AGAIN
    
    # HELLOOOO
    
    ### SO, HI AGAIN!  
    
    <div class="hidden-toc">
    # Jump to Species {#custom-section}
    ## [species1](mypage.org) 
    ## [species1](mypage.org)  
    
    <!-- these two species are added to the TOC wile staying hidden in the document. good.-->
    <!-- this next code chunk should print items with the same structure, hide them, and include them in the TOC, but this does not happen  -->
    
    ```{r,echo=FALSE, include=TRUE, results='asis'}
    # Create hidden TOC items from the data frame
    library(dplyr)
    html.sp.listx <- data.frame(
      species = c("Species A", "Species B", "Species C"),
      html = c("https://example.com/species-a", "https://example.com/species-b", "https://example.com/species-c")
    )
    
    # Create hidden TOC items from the data frame with hyperlinks
    hidden_toc_items <- html.sp.listx %>%
      mutate(toc_item =paste0("## [",species,"]", "(",html,")"))%>%
      pull(toc_item)
    
    # Print the hidden TOC items within a div with the 'hidden-toc' class
    
    cat(paste(hidden_toc_items, collapse = "\n"))
    ```
    
    </div>
    

    enter image description here