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.

Demos and Documentation

• hallelujahdrive.github.io/elm-accordion

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
        []
        ( Accordion.head
            [ onClick HeadClicked ]
            [ text "Accordion head text content" ]
        )
        ( Accordion.body [] [ text "Accordion body content" ] )
        model

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.