Update the position of Action button/Link

[Minh96]

The action Link I am using behaves as a hide/show link, so when it is clicked some slider inputs will be shown (they are hidden otherwise). I am trying to move my action link below these slider inputs when they are shown. The following screenshots of another application (not a Shiny app I don't think) show the position of the actionLink (labelled Advanced and Simple) changes when it's clicked:

I'd found a couple of articles on how to update the label for action button/action link, for example https://stackoverflow.com/questions/48925576/r-shiny-toggle-text-of-actionlink.

Is there any way to achieve this in Shiny? Any help will be greatly appreciated.

Many thanks.

[nirgrahamuk]

Is it a more complicated challenge than putting your hidden ui objects above the link in the first place, so when they are unhidden, they are in the right place ?

you shared with us pictures not any code..., I'm puzzled as to what you expect us to tell you from that

[Minh96]

Hi,
Thank you for your reply. I apologize for the lack of code in my previous post. I have now included a reproducible example as below,

UI.R

ui <- dashboardPage(
  shinyjs::useShinyjs(), 
  header = dashboardHeader(),
  sidebar = dashboardSidebar(),
  body = dashboardBody()
)

SERVER.R

server <- function(input, output, session){
   output$sidebar <- renderUI({
        tags$style(type='text/css', '#toggleAdvanced {color:blue'),
        actionLink(inputId = "toggleAdvanced", label = "Advanced options"),
        shinyjs::hidden(div(id = "advanced",
                 div(style="color:black;", uiOutput(outputId = "YEAR3")),
                 div(id="bar2", checkboxInput(inputId = "bar3", label = "All/None"), style = "margin-bottom:-25px;margin-left:10px;color:black"),
                               checkboxInput(inputId = "lambda", label = tags$span("Transform data", style = "font-weight:bold;color:black;")),
                               actionButton(inputId = "subset", label = "Subset"))
                         )
   })

   shinyjs::onclick("toggleAdvanced", shinyjs::toggle(id = "advanced", anim = TRUE)) 

  observeEvent(input$toggleAdvanced,{
    if(input$toggleAdvanced %% 2 == 1) {
      txt <- "Hide options"
    } else {
      txt <- "Show options"
    }
    updateActionButton(session, "toggleAdvanced", label = txt, icon = icon("angle-double-up"))
  })
}

The actionLink produces a link for advanced options as shown in pic1. Once clicked, the label of the link will change to "Hide Options" as shown in pic2. "Hide Options" will then change to "Show Options" if clicked. If possible, I would like the "Hide Options" link to be relocated to be below the actionbutton labelled "subset", i.e. it should be below all the shinyjs::hiddent inputs. In addition, the "Hide Options" link should have a "angle-double-up" icon and the "Show Options" link should have a "angle-double-down" icon. I don't know how to update this for the "Show Options" link. My question is very similar to what the application example looks like in my previous post.

pic1

pic2

pic3

Hope this is clear enough. Many thanks.

[nirgrahamuk]

I was suprised to find your code would not execute.
I had to figure your libraries, and create an appropriate uiOutput for anything at all to show.

library(shiny)
library(shinyjs)
library(shinydashboard)
ui <- dashboardPage(
  shinyjs::useShinyjs(),
  header = dashboardHeader(),
  sidebar = dashboardSidebar(uiOutput("sidebar")),
  body = dashboardBody()
)

server <- function(input, output, session) {
  output$sidebar <- renderUI({
    div(
      shinyjs::hidden(div(
        id = "advanced",
        div(style = "color:black;", uiOutput(outputId = "YEAR3")),
        div(id = "bar2", checkboxInput(inputId = "bar3", label = "All/None"), style = "margin-bottom:-25px;margin-left:10px;color:black"),
        checkboxInput(inputId = "lambda", label = tags$span("Transform data", style = "font-weight:bold;color:black;")),
        actionButton(inputId = "subset", label = "Subset")
      )),
      tags$style(type = "text/css", "#toggleAdvanced {color:blue}"),
      actionLink(inputId = "toggleAdvanced", label = "Advanced options"),
    )
  })

  shinyjs::onclick("toggleAdvanced", shinyjs::toggle(id = "advanced", anim = TRUE))

  observeEvent(input$toggleAdvanced, {
    if (input$toggleAdvanced %% 2 == 1) {
      txt <- "Hide options"
    } else {
      txt <- "Show options"
    }
    updateActionButton(session, "toggleAdvanced", label = txt, icon = icon("angle-double-up"))
  })
}


shinyApp(ui, server)

[hadley]

You might find it easier to use a tabsetPanel() for dynamic UI as that gives you greater control over the UI layout — https://mastering-shiny.org/action-dynamic.html#dynamic-visibility