Elm Bootstrap Accordion Show at init

Question

I'm currently approaching Elm and I need to create a page with some collapsable data. As I am currently using Bootstrap, the Accordion component seems to be the best one to employ.

Here's my relevant dummy code:

view : Model -> Html Msg
view model =
    div []
        [ basicAccordion model.accordionState
            "Dummy1"
            (div []
                [ text "Dummy Title"
                , Button.button [ Button.secondary ] [ text "Hello World" ]
                ]
            )
            Nothing
        , structuredAccordion model.accordionState
            "Dummy2"
            ([ Card.titleH4 [] [ text "Another trial" ]
             , Card.text [] [ text "Bye" ]
             ]
            )
            (Just ("id_dummy2"))
        ]

basicAccordion : Accordion.State -> String -> Html Msg -> Maybe String -> Maybe Bool -> Html Msg
basicAccordion state title content id collapsed =
    let
        singleCard =
            Card.custom <| content
    in
        structuredAccordion state title [ singleCard ] id collapsed


structuredAccordion : Accordion.State -> String -> List (Card.BlockItem Msg) -> Maybe String -> Maybe Bool -> Html Msg
structuredAccordion state title content id collapsed =
    Accordion.config Msgs.AccordionMsg
        |> Accordion.withAnimation
        |> Accordion.cards
            [ Accordion.card
                { id = (Maybe.withDefault title id)
                , options = []
                , header =
                    Accordion.header [] <| Accordion.toggle [] [ text title ]
                , blocks =
                    [ Accordion.block [] content
                    ]
                }
            ]
        |> Accordion.view state

Here's the problem:

• I'd like to show the Accordion content as initial page state
• I found out there is a default setting for the bootstrap accordion, but there's nothing related to its visibility that is exposed by Bootstrap.Accordion

To me this is quite a basic feature and I was surprised it's not part of the card configuration... Hopefully I am the one not noticing something. Any idea?

P.S.: First post, be merciful :)

Answer 1

A little update, which is almost a solution.

Good guy rundis committed a new version. that allows to give one card an initially expanded state. This will be probably part of the 4.0 package release.

The interface is pretty simple as you just need to add to the model init:

model.AccordionState = Accordion.initialStateCardOpen myAccordionId

where the id is the one set in the view, while creating the Accordion.

This doesn't make me completely happy as I'd like to choose among a list of several cards to open, but partially solves the problem.