The status of multiple accordions can be managed collectively and linked.
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
Accordion.Internal.Status comparable
Multiple accordions status type
multiOpen : List comparable -> Status comparable
Initialize multiple open Status.
values
List of values associated with open accordions(e.g. List of id
).singleOpen : Maybe comparable -> Status comparable
Initialize single open Status.
value
A value of associated with open accoedion(e.g. id
).update : comparable -> Status comparable -> Status comparable
Toggle the state of the argument value.
isOpen : comparable -> Status comparable -> Basics.Bool
Check value status if it is open.