f7Accordion | R Documentation |
f7Accordion
creates an interactive accordion container.
f7AccordionItem
is to be inserted in f7Accordion.
updateF7Accordion toggles an f7Accordion on the client.
f7Accordion(..., id = NULL, multiCollapse = FALSE)
f7AccordionItem(..., title = NULL, open = FALSE)
updateF7Accordion(
id,
selected = NULL,
session = shiny::getDefaultReactiveDomain()
)
... |
Item content such as f7Block or any f7 element. |
id |
Accordion instance. |
multiCollapse |
Whether to open multiple items at the same time. FALSE by default. |
title |
Item title. |
open |
Whether the item is open at start. FALSE by default. |
selected |
Index of item to select. |
session |
Shiny session object |
David Granjon, dgranjon@ymail.com
# Accordion
if(interactive()){
library(shiny)
library(shinyMobile)
shinyApp(
ui = f7Page(
title = "Accordions",
f7SingleLayout(
navbar = f7Navbar("Accordions"),
f7Accordion(
id = "myaccordion1",
f7AccordionItem(
title = "Item 1",
f7Block("Item 1 content"),
open = TRUE
),
f7AccordionItem(
title = "Item 2",
f7Block("Item 2 content")
)
),
f7Accordion(
multiCollapse = TRUE,
inputId = "myaccordion2",
f7AccordionItem(
title = "Item 1",
f7Block("Item 1 content")
),
f7AccordionItem(
title = "Item 2",
f7Block("Item 2 content")
)
)
)
),
server = function(input, output, session) {
observe({
print(
list(
accordion1 = input$myaccordion1,
accordion2 = input$myaccordion2
)
)
})
}
)
}
# Update accordion
if (interactive()) {
library(shiny)
library(shinyMobile)
shinyApp(
ui = f7Page(
title = "Accordions",
f7SingleLayout(
navbar = f7Navbar("Accordions"),
f7Button(inputId = "go", "Go"),
f7Accordion(
id = "myaccordion1",
f7AccordionItem(
title = "Item 1",
f7Block("Item 1 content"),
open = TRUE
),
f7AccordionItem(
title = "Item 2",
f7Block("Item 2 content")
)
)
)
),
server = function(input, output, session) {
observeEvent(input$go, {
updateF7Accordion(id = "myaccordion1", selected = 2)
})
observe({
print(
list(
accordion1_state = input$myaccordion1$state,
accordion1_values = unlist(input$myaccordion1$value)
)
)
})
}
)
}
Add the following code to your website.
For more information on customizing the embed code, read Embedding Snippets.