Created
July 27, 2016 23:34
-
-
Save eeue56/d0a2f901dc2fe36ab4562940b7fd28e4 to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| module Component.Accordion exposing (view) | |
| import Html exposing (..) | |
| import Html.Attributes exposing (..) | |
| import Html.Events exposing (..) | |
| view : | |
| (entry -> Html msg) | |
| -> (entry -> Html msg) | |
| -> (Bool -> entry -> msg) | |
| -> List ( entry, Bool ) | |
| -> Html msg | |
| view viewHeader viewPanel toggleExpanded entries = | |
| let | |
| viewEntry ( entry, expanded ) = | |
| let | |
| entryClass = | |
| classList | |
| [ "accordion-entry" => True | |
| , "accordion-entry-state-expanded" => expanded | |
| , "accordion-entry-state-collapsed" => (not expanded) | |
| ] | |
| entryHeader = | |
| div | |
| [ class "accordion-entry-header" | |
| , onClick (toggleExpanded (not expanded) entry) | |
| ] | |
| [ viewHeader entry ] | |
| entryPanel = | |
| div [ class "accordion-entry-panel", role "tabpanel" ] | |
| [ viewPanel entry ] | |
| in | |
| div [ entryClass, role "tab" ] | |
| [ entryHeader, entryPanel ] | |
| in | |
| div | |
| [ class "accordion" | |
| , role "tablist" | |
| , attribute "aria-live" "polite" | |
| ] | |
| (List.map viewEntry entries) | |
| (=>) : a -> b -> ( a, b ) | |
| (=>) = | |
| (,) | |
| role : String -> Attribute msg | |
| role = | |
| attribute "role" |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment