Feature Request - Accordion: expand/collapse when clicking a button outside the header

[tillydray]

We would like to be able to expand/collapse an accordion card on two occasions:

1. When clicking the card header
2. When clicking the Next button (see image)

I don't see a way to make that work currently, but maybe I'm missing something.

[dseebacher]

I don't think it is possible right now but I can think of two options to extend Accordion:

1. Add a closable element to the accordion module that would be a copy of renderToggle and a new heightDecoder to find the parent instead of the sibling. But the code does not seem super reusable, so I gave up on it :/

2. There is no way to interact from the outside at the moment. Here is some code that could modify the state in response to a message:

toggleCard : Config msg -> String -> State -> State
toggleCard (Config config) id state =
    let
        handleVisibility =
            \fn state -> { state | visibility = fn state.visibility }
    in
    mapCardState id (handleVisibility <| visibilityTransition config.withAnimation) state

It's a design decision if that should even be possible. I don't like the fact, that the config is needed here, maybe there is a better way. And it skips the one open logic so it might be a mess if the button is not part of the card you want to close.

So just hacks from my side ;)

[tillydray]

We have it working with our own hacks, but it's probably not good to add to the elm-bootstrap codebase. You can probably see what we're doing just by this little bit of code from Update.elm

Msg.ExpandAccordionCard step egExtId ->
  if model.currentStep == Just step then
    { model | accordionState = Accordion.initialState
    , currentStep = Nothing
    }
  else
    { model | accordionState = Accordion.initialStateCardOpen <| Step.stepToStr step
    , currentStep = Just step
    }