0

I currently have a Story as one of the tabs in my Shiny app. I am trying to create a clickable table of contents (similar to what can be done for instance in Microsoft Word), to link the various sections in that table of contents to the actual text within the Story (e.g. clicking on "Chapter I" in the table of contents would take me to Chapter I within the story. The clickable table of contents should appear within the same tab, at the very top of the text.

While I have successfully created the text (of the Story), I am not familiar with a way to create the clickable table of contents noted above. Your guidance will be much appreciated.

What I currently have for the text of the story is presented below.

tabPanel("Story",
         
         fluidRow(column(width=2),
                  column(
                    h3(p(tags$em("Introduction"),style="color:black;text-align:left; font-family: Georgia; font-size: 20px")),
                    width=6,offset=1,style="background-color:white;border-radius: 10px")),
         
         fluidRow(column(width=2),
                  column(
                    h4(p("This is a short story about nature")),
                    width=6,offset=1,
                    style="background-color:white;border-radius: 10px")),
         
         fluidRow(column(width=2),
                  column(
                    h3(p(tags$em("Chapter I"),style="color:black;text-align:left; font-family: Georgia; font-size: 20px")),
                    width=6,offset=1,style="background-color:white;border-radius: 10px")),
         
         
         fluidRow(column(width=2),
                  column(
                    h4(p("In this chapter we present the background of the story")),
                    width=6,offset=1,
                    style="background-color:white;border-radius: 10px")),
         
         fluidRow(column(width=2),
                  column(
                    h3(p(tags$em("Chapter II"),style="color:black;text-align:left; font-family: Georgia; font-size: 20px")),
                    width=6,offset=1,style="background-color:white;border-radius: 10px")),
         
         fluidRow(column(width=2),
                  column(
                    h4(p("This chapter is about the main protagonists")),
                       width=6,offset=1,
                       style="background-color:white;border-radius: 10px"))
)

1 Answer 1

2

Well, this is rather a HTML question. Here is a simple TOC:

library(shiny)
lipsum <- function(){
  "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
}

css <- "
.chapter {
  color: black;
  text-align: left;
  font-family: Georgia;
  font-size: 20px;
}

.chapter-container {
  background-color: white;
  border-radius: 10px;
}

#toc_container {
  position: fixed;
  top: 0;
  background: #f9f9f9 none repeat scroll 0 0;
  border: 1px solid #aaa;
  display: table;
  font-size: 95%;
  margin-bottom: 1em;
  padding: 20px;
  width: auto;
}

.toc_title {
  font-weight: 700;
  text-align: center;
}

#toc_container li,
#toc_container ul,
#toc_container ul li {
  list-style: outside none none !important;
}
"

ui <- fluidPage(
  tags$head(tags$style(HTML(css))),
  
  fluidRow(
    column(
      width = 12,
      tags$div(
        id = "toc_container",
        tags$p(
          class = "toc_title",
          "Contents"
        ),
        tags$ul(
          class = "toc_list",
          tags$li(
            tags$a(
              href = "#introduction",
              "Introduction"
            ),
          ),
          tags$li(
            tags$a(
              href = "#chapterI",
              "Chapter I"
            )
          ),
          tags$li(
            tags$a(
              href = "#chapterII",
              "Chapter II"
            )
          )
        )
      )
    )
  ),
  
  fluidRow(
    column(width = 2),
    column(
      h3(
        id = "introduction",
        p(
          tags$em("Introduction"), 
          class = "chapter"
        )
      ),
      width = 6, offset = 1, class = "chapter-container"
    )
  ),
  fluidRow(
    column(width = 2),
    column(
      h4(
        p(
          "This is a short story about nature."
        )
      ),
      p(lipsum()),
      width = 6, offset = 1,
      class = "chapter-container"
    )
  ),
  fluidRow(
    column(width = 2),
    column(
      h3(
        id = "chapterI",
        p(
          tags$em("Chapter I"), 
          class = "chapter"
        )
      ),
      width = 6, offset = 1, class = "chapter-container"
    )
  ),
  fluidRow(
    column(width = 2),
    column(
      h4(
        p(
          "In this chapter we present the background of the story."
        )
      ),
      p(lipsum()),
      width = 6, offset = 1,
      class = "chapter-container"
    )
  ),
  fluidRow(
    column(width = 2),
    column(
      h3(
        id = "chapterII",
        p(
          tags$em("Chapter II"), 
          class = "chapter"
        )
      ),
      width = 6, offset = 1, class = "chapter-container"
    )
  ),
  fluidRow(
    column(width = 2),
    column(
      h4(
        p(
          "This chapter is about the main protagonists."
        )
      ),
      p(lipsum()),
      width = 6, offset = 1,
      class = "chapter-container"
    )
  )
)


server <- function(input, output) {
  
}

shinyApp(ui, server)

enter image description here

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.