Elm Accordion - Simple Accordion for Elm

This library adds an accordion element that toggles showing or hiding the content by increasing or decreasing its height.

Getting started

Installation

elm install hallelujahdrive/elm-accordion@1.0.4

This library relies on additional JavaScript and CSS. Your project must load them in one of the following ways.

Embedding in HTML

The easy way is to add the following elements to your page:

<link rel="stylesheet" type="text/css" href="https://unpkg.com/elm-accordion@1.0.4/dist/elm-accordion.min.css" />
<script src="https://unpkg.com/elm-accordion@1.0.4/dist/elm-accordion.min.js"></script>

Using bundler

If you want to use a bundler like webpack you can install the package from npm:

npm install elm-accordion@1.0.4

And in your Javascript add the following import:

require("elm-accordion/dist/elm-accordion.min.js");
require("elm-accordion/dist/elm-accordion.min.css");

Simple Usage

Write code like the following. Check the Documentation for more information on the module.

import Accordion

type alias Model = Bool

type Msg = Toggled

update msg model =
    case msg of
        Toggled ->
            ( model = not model
            , Cmd.none
            )

view model =
    Accordion.accordion
        []
        ( Accordion.head
            [ onClick  Toggled ]
            [ text "Accordion head content" ]
        )
        ( Accordion.body [] [ text "Accordion body content" ] )
        model

Documentation

Accordion

accordion : List (Attribute msg) -> Head msg -> Body msg -> Bool -> Html msg

Accordion view function.

attributes List of attributes
head An accordion head element.
body An accordion body element.
open Specify whether a dailog is open

Accordion Head

type alias Head msg =

Head msg

Accordion head type

head : List (Attribute msg) -> List (Html msg) -> Head msg

Accordion head constructor

attributes List of attributes
children List of child elements

Accordion Body

type alias Body msg =

Body msg

Accordion body type

body : List (Attribute msg) -> List (Html msg) -> Body msg

Accordion body constructor

attributes List of attributes
children List of child elements

Accordion.List

The status of multiple accordions can be managed collectively and linked.

Status

type alias Status comparable =

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 accordion(e.g. id).

Update Status

update : comparable -> Status comparable -> Status comparable

Toggle the state of the argument value.

Check status

isOpen : comparable -> Status comparable -> Bool

Check value status if it is open.

Examples

Simple Accordion

Simple accordion with text content only.

Let's click this text

Elm code:

import Accordion

type alias Model = Bool

type Msg = Toggled

update msg model =
    case msg of
        Toggled ->
            ( model = not model
            , Cmd.none
            )

view model =
    Accordion.accordion
        []
        ( Accordion.head
            [ onClick Toggled ]
            [ text "Let's click this text" ]
        )
        ( Accordion.body [] [ text "Simple accordion body content" ] )
        model

Accordion customization

You can set any element on the head and body of the accordion. If you want to change the style of the open accordion, specify .elm-accordion--open in the class selector.

Customized accordion

Elm code:

import Accordion

type alias Model = Bool

type Msg = Toggled

update msg model =
    case msg of
        Toggled ->
            ( model = not model
            , Cmd.none
            )

view model =
    Accordion.accordion
        [ class "example-accordion" ]
        ( Accordion.head
            [ class "example-accordion__head"
            , onClick Toggled
            ]
            [ text "Customized accordion"
            , Html.span [ class "example-accordion__head__tail" ]
                [ Html.i [ class "material-icons" ] [ text "arrow_drop_down" ]
                ]
            ]
        )
        ( Accordion.body [ class "example-accordion__body" ]
            [ Html.ul [] <|
                List.map
                    (\i -> Html.li [] [ text ("Text line "  ++ String.fromInti) ])
                    (List.range 1 5)
            ]
        )
        model

CSS code:

/* You need to import material-icons(https://google.github.io/material-design-icons/). */
.example-accordion__body {
    background-color: #eceff1;
}
    
.example-accordion__head {
    align-items: center;
    background-color: #ff4525;
    color: #fff;
    cursor: pointer;
    display: flex;
    height: 48px;
    padding: 0 16px;
}

.example-accordion__head__tail {
    margin-left: auto;
}
        
.example-accordion__head__tail i {
        transition: transform .15s cubic-bezier(0.4, 0.2, 0, 0.1);
    }
}

.example-accordion__body > * {
    margin: 0.75em;
}

.elm-accordion--open .example-accordion__head {
    background-color: #ff1744;
    transition: background-color .15s cubic-bezier(0.4, 0.2, 0, 0.1);
}

.elm-accordion--open .example-accordion__head__tail i {
    transform: rotate(180deg);
}

List of accordions

Controls the status of multiple Accordions collectively.

Multipe open

Accordion 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Accordion 2

Accordion 3

Accordion 4

Accordion 5

Elm code:

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

Browser support

This library is implemented using custom elements. Check the support status of Custom Elements(V1) for each broser.

License

This library is licensed under MIT License.

Contributions

Please submit your feedback using this library to GitHub.