hallelujahdrive / elm-accordion / Accordion.List

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


type alias Status comparable =
Accordion.Internal.Status comparable

Multiple accordions status type

multiOpen : List comparable -> Status comparable

Initialize multiple open Status.

singleOpen : Maybe comparable -> Status comparable

Initialize single open Status.

Update Status

update : comparable -> Status comparable -> Status comparable

Toggle the state of the argument value.

Check status

isOpen : comparable -> Status comparable -> Basics.Bool

Check value status if it is open.