![build](https://github.com/hallelujahdrive/elm-accordion/workflows/build/badge.svg)

# 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](https://hallelujahdrive.github.io/elm-accordion)

## Getting Started

### Installation

```
elm install hallelujahdrive/elm-accordion@1.0.3
```

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:

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

### Using Bundler

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

```
npm install elm-accordion@1.0.3
```

Then in your Javascript add a following import:

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

### Simple Usage

```elm
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)](https://caniuse.com/#feat=custom-elementsv1) for each broser.

## License

This library is licensed under [MIT License](https://gtihub.com/elm-accordion/LICENSE).

## Contributions

Please submit your feedback using this library to [GitHub](htps://github.com/hallelujahdrive/elm-accirdion/issues).