Bootstrap.Accordion

An accordion is a group of stacked cards where you can toggle the visibility (slide up/down) of each card

type alias Model =
    { accordionState = Accordion.state }




init: (Model, Cmd Msg)
    ( { accordionState = Accordion.initialState }, Cmd.none )




type Msg
    = AccordionMsg Accordion.State






update : Msg -> Model -> ( Model, Cmd Msg )
update msg model =
    case msg of
        AccordionMsg state ->
            ( { model | accordionState = state }
            , Cmd.none
            )




view : Model -> Html Msg
view model =
    Accordion.config
        |> Accordion.withAnimation
        |> Accordion.cards
            [ Accordion.card
                { id = "card1"
                , options = []
                , header =
                    Accordion.header [] <| Accordion.toggle [] [ text "Card 1" ]
                , blocks =
                    [ Accordion.block []
                        [ Card.text [] [ text "Lorem ipsum etc" ] ]
                    ]
                }
            , Accordion.card
                { id = "card2"
                , options = []
                , header =
                    Accordion.header [] <| Accordion.toggle [] [ text "Card 2" ]
                , blocks =
                    [ Accordion.block []
                        [ Card.text [] [ text "Lorem ipsum etc" ] ]
                    ]
                }
            ]
        |> Accordion.view model.accordionState




-- You need to do this wiring when you use animations !


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

Accordion

view : State -> Config msg -> Html msg

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

config : (State -> msg) -> Config msg

Creates an initial/default view configuration for an accordion.

cards : List (Card msg) -> Config msg -> Config msg

Define the cards that your accordion should consist of

withAnimation : Config msg -> Config msg

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.

type Config msg

Opaque type that defines the view configuration information of your accordion

You create an inition 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

initialState : State

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

type State

Opaque representation of the view state for the accordion

card :

{ id : String

, options : List (CardOption msg)

, blocks : List (CardBlock msg)

, header : Header msg

}

-> Card msg

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

block : List (BlockOption msg) -> List (BlockItem msg) -> CardBlock msg

Create a block element for use in an accordion card.

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

blockOptions List of block options
blockItems List of block items

listGroup : List (Item msg) -> CardBlock msg

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

toggle : List (Attribute msg) -> List (Html msg) -> Toggle msg

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

attributes List of attributes
children List of child elements

headerH1 : List (Attribute msg) -> Toggle msg -> Header msg

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

headerH2 : List (Attribute msg) -> Toggle msg -> Header msg

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

headerH3 : List (Attribute msg) -> Toggle msg -> Header msg

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

headerH4 : List (Attribute msg) -> Toggle msg -> Header msg

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

headerH5 : List (Attribute msg) -> Toggle msg -> Header msg

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

headerH6 : List (Attribute msg) -> Toggle msg -> Header msg

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

appendHeader : List (Html msg) -> Header msg -> Header msg

Add elements after the toggle element in a accordion card header

prependHeader : List (Html msg) -> Header msg -> Header msg

Add elements before the toggle element in a accordion card header

type Card msg

Opaque representation of a card item

type alias CardBlock msg =

CardBlock msg

Opaque representation of a card block element

type Toggle msg

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

Animation

subscriptions : State -> (State -> msg) -> Sub msg

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

rundis/elm-bootstrap/2.0.0

Bootstrap.Accordion

Accordion

Contents

Animation

Modules