ebailey78 / shinyBS

Twitter Bootstrap Components for Shiny
182 stars 47 forks source link

How to make a BS collapse when clicking the header div? #122

Open earnaud opened 4 years ago

earnaud commented 4 years ago

Freely inspired issue from: https://stackoverflow.com/questions/19236717/how-to-make-a-bootstrap-accordion-collapse-when-clicking-the-header-div

This issue has been answered and could be easily handled with two new attributes to a div in BScollapsePanel(), like:

bsTag <- shiny::tags$div(class = paste0("panel panel-", style), value = value, 
       shiny::tags$div(class = "panel-heading", role = "tab", id = paste0("heading_", id),
         `data-toggle` = "collapse", `data-target` = paste0("#", id), 
         shiny::tags$h4(class = "panel-title", 
           shiny::tags$a(`data-toggle` = "collapse", href = paste0("#", id), title)
         )
       ),
       shiny::tags$div(id = id, class = "panel-collapse collapse", role = "tabpanel", 
         shiny::tags$div(class = "panel-body", content)
       )
     )
warnes commented 3 years ago

Add this to your custom.css:

.panel.title>a {
  display: block;
  padding: 10px 15px;
  margin: -10px -15px;
}

How it works: It expands the a tag to fill the entire panel header area, so that clicks anywhere in the header are handled.