nixCodeX / elm-bootstrap / 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)
init =
    ( { 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 AccordionMsg
        |> Accordion.withAnimation
        |> Accordion.cards
            [ Accordion.card
                { id = "card1"
                , options = []
                , header =
                    Accordion.header [] <| Accordion.toggle [] [ text "Card 1" ]
                , blocks =
                    [ Accordion.block []
                        [ Block.text [] [ text "Lorem ipsum etc" ] ]
                    ]
                }
            , Accordion.card
                { id = "card2"
                , options = []
                , header =
                    Accordion.header [] <| Accordion.toggle [] [ text "Card 2" ]
                , blocks =
                    [ Accordion.block []
                        [ Block.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

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.

onlyOneOpen : Config msg -> Config msg

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

allowOverflow : Config msg -> Config msg

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

isOpen : String -> State -> Basics.Bool

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 (:


type Config msg

Opaque type that defines the view configuration information of your accordion

initialState : State

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

initialStateCardOpen : String -> State

Initial state with card that matches given id expanded.


type State

Opaque representation of the view state for the accordion

Contents

card : { id : String, options : List (Bootstrap.Card.Option msg), blocks : List (CardBlock msg), header : Header msg } -> Card msg

Creates a card item for use in an accordion

block : List (Bootstrap.Card.Block.Option msg) -> List (Bootstrap.Card.Block.Item msg) -> CardBlock msg

Create a block element for use in an accordion card.

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

listGroup : List (Bootstrap.ListGroup.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" ]
    ]

header : List (Html.Attribute msg) -> Toggle msg -> Header msg

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.

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

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

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

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

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

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

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

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

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

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

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

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

headerH6 : List (Html.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. Order matters if you're using both prependHeader and appendHeader. Specifically, it should be toggle |> appendHeader |> prependHeader.

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

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.


type Card msg

Opaque representation of a card item


type alias CardBlock msg =
Bootstrap.Card.Internal.CardBlock msg

Opaque representation of a card block element


type Header msg

Opaque type representing the header for an accordion card


type Toggle msg

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

Animation

subscriptions : State -> (State -> msg) -> Platform.Sub.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