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/[email protected]

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/[email protected]/dist/elm-accordion.min.css" />
<script src="https://unpkg.com/[email protected]/dist/elm-accordion.min.js"></script>

Using bundler

If you use bundler please instal the Javascript and CSS assets via npm:

npm install [email protected]

Then in your Javascript add a following import:

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

Simple usage

import Accordion

type alias Model =
    Bool

type Msg
    = HeadClicked

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

Browser support

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

hallelujahdrive/elm-accordion/1.0.1