The status of multiple accordions can be managed collectively and linked.

Basic usage

import Accordion
import Accordion.List as AccordionList


type alias model =
    { multiOpen : Bool
    , status : AccordionList.Status String
    }


type Msg
    = Toggled
    | UpdateAccordion String


update msg model =
    case msg of
        Toggled ->
            ({ model
                | multiOpen = not model.multiOpen
                , status =
                    if model.multiOpen then
                        AccordionList.singleOpen Nothing
                    else
                        AccordionList.multiOpen []
             }
            , Cmd.none
            )


        UpdateStatus id_ ->
            ( { model | AccordionList.uodate id_ model.status }
            , Cmd.none
            )


view model =
    let
        id_ index_ =
            "example-accordion-" ++ String.fromInt index_


        accordion_ index_ =
            Accordion.accordion [ id (id_ index_) ]
                ( Accordion.head
                    [ onClick (UpdateStatus <| id_ index_) ]
                    headChildren
                )
                ( Accordion.body [] bodyChildren )
                ( AccordionList.isOpen (id_ index_) model.status )
    in
    Html.div []
        List.map accordion_ <|
            List.range 1 5

Status

Update Status

Check status