Create an interactive accordion element

Accordion.config AccordionMsg
    |> Accordion.withAnimation
    |> Accordion.cards
        [ cardOne model -- view function to create a card
        , cardTwo model
        ]
    |> Accordion.view model.accordionState

• state The current view state
• config The configuration for the display of the accordion

Creates an initial/default view configuration for an accordion.

Define the cards that your accordion should consist of

Set option for using animations for sliding card contents up/down.

Note: You must remember to hook up the subscriptions function when using this option.

Set option for only allowing one (or zero) open cards at any one time.

Set option for allowing contents of a card to overflow the card itself (useful for dropdowns)

Check if given card is open/expanded (or when animating, on it's way to become open/expanded).

NOTE: If you give a non-existing id it will return False (:

Opaque type that defines the view configuration information of your accordion

• You create an initial configuration by calling the config function
• The withAnimtion function allows you to define that the contents of cards should animate up/down
• The cards function defines the List of cards to be displayed

Initial state for the accordion. Typically used from your main init function

Initial state with card that matches given id expanded.

Opaque representation of the view state for the accordion

Creates a card item for use in an accordion

• card config record
  • id Unique id for your card
  • options List of card styling options
  • header Card header containing a toggle to hide/show the details of a card
  • blocks The main content elements of the card

Create a block element for use in an accordion card.

Accordion.block []
    [ Block.text [] [ text "Just some text" ] ]

• blockOptions List of block options
• blockItems List of block items

Create a List Group element for use in an accordion. List groups are block elements just like block

Accordion.listGroup
    [ ListGroup.li [] [ text "Item 1" ]
    , ListGroup.li [] [ text "Item 2" ]
    ]

• items List of List group items

Create a header (div) for an accordion card. It must contain a toggle element which will be responsible for display/hide the details of an individual card.

You may optionally prepend or append children to the header for further customization.

• attributes - List of attributes
• toggle - A toggle element

Creates a card toggle element used for toggling the display of the main content of your cards

• attributes List of attributes
• children List of child elements

Create an accordion card header but rather than a div, using a h1 element

Create an accordion card header but rather than a div, using a h2 element

Create an accordion card header but rather than a div, using a h3 element

Create an accordion card header but rather than a div, using a h4 element

Create an accordion card header but rather than a div, using a h5 element

Create an accordion card header but rather than a div, using a h6 element

Add elements after the toggle element in a accordion card header. Order matters if you're using both prependHeader and appendHeader. Specifically, it should be toggle |> appendHeader |> prependHeader.

Add elements before the toggle element in a accordion card header. Order matters if you're using both prependHeader and appendHeader. Specifically, it should be toggle |> appendHeader |> prependHeader.

Opaque representation of a card item

Opaque representation of a card block element

Opaque type representing the header for an accordion card

Opaque representation of toggle element for initiating slide up/down for a card

When using animations you must remember to call this function for your main subscriptions function

subscriptions : Model -> Sub Msg
subscriptions model =
    Accordion.subscriptions model.accordionState AccordionMsg

• state The current view state of the accordion
• toMsg Message constructor function that is used to step the view state forward