Show/Hide bsCollapse panels in Shiny

Question

I am building a Shiny App using ShinyBS and Shinyjs packages, and I would like to hide/show bscollapse panels depending on the input on a radio button in another bscollapse panel.

When "AAA" or "BBB" option is selected in Parent1, I want to show only "AAAA" and "BBBB" collapsePanels in Parent2.

When "CCC" or "DDD" option is selected in Parent1, I want to show only "CCCC" and "DDDD" collapsePanels in Parent2.

I am using show() and hide() commands from the shinyjs package but I can not make it work. When "AAA" or "BBB" is selected, nothing is appearing in Parent2, which is not what I want.

Below is the code to reproduce the problem :

library(shiny)
library(shinyBS)
library(shinyjs)

server = function(input, output, session) {

observeEvent(input$TypeRadio,{
if (input$TypeRadio == "AAA" || input$TypeRadio == "BBB")
  shinyjs::show("collapse1")
  shinyjs::hide("collapse2")
})

observeEvent(input$TypeRadio,{
if (input$TypeRadio == "CCC" || input$TypeRadio == "DDD")
  shinyjs::show("collapse2")
  shinyjs::hide("collapse1")})
}


ui = fluidPage(
shinyjs::useShinyjs(),

bsCollapse(id = "collapseExample", multiple = FALSE,
bsCollapsePanel("Parent1","",

              radioButtons("TypeRadio", "",
                           choices = list("AAA" = "AAA",
                                          "BBB" = "BBB",
                                          "CCC" = "CCC",
                                          "DDD" = "DDD"),
                           inline = FALSE)),


bsCollapsePanel("Parent2","",

              bsCollapse(id = "collapse1",   
                         bsCollapsePanel("AAAA", ""),
                         bsCollapsePanel("BBBB", "")),

              bsCollapse(id = "collapse2",   
                         bsCollapsePanel("CCCC", ""),
                         bsCollapsePanel("DDDD", ""))

                         )
 )                 
 )
shinyApp(ui = ui, server = server)

Answer 1

library(shiny)
library(shinyBS)
library(shinyjs)

if(interactive()){
  shinyApp(
    ui <- fluidPage(
      useShinyjs(),
      bsCollapse(id = "collapseExample", multiple = FALSE,
                 bsCollapsePanel("Parent1","",
                                 radioButtons("TypeRadio", "",
                                              choices = list("AAA" = "AAA",
                                                             "BBB" = "BBB",
                                                             "CCC" = "CCC",
                                                             "DDD" = "DDD"),
                                              inline = FALSE)),
                 bsCollapsePanel("Parent2","",
                                 bsCollapse(id = "collapse1",   
                                            bsCollapsePanel("AAAA", ""),
                                            bsCollapsePanel("BBBB", "")),

                                 bsCollapse(id = "collapse2",   
                                            bsCollapsePanel("CCCC", ""),
                                            bsCollapsePanel("DDDD", ""))
                                 )
      )
    ),

    server = function(input, output, session){

      observeEvent(input$TypeRadio,{
        if("AAA" == input$TypeRadio | "BBB" == input$TypeRadio){
          shinyjs::show("collapse1")
          shinyjs::hide("collapse2")
        }

        if("CCC" == input$TypeRadio | "DDD" == input$TypeRadio){
          shinyjs::hide("collapse1")
          shinyjs::show("collapse2")
        }
      })

    }
  )
}