Accordions out of the box with Clojurescript and Closure
Table of Contents
Accordions are actually available out-of-the-box in Clojurescript with the included Google closure.js that Clojurescript is built upon. This code shows the AnimatedZippy, which has a nice slide-out function; there’s also a plain Zippy. They are drop-in replacements for eachother.
Rendering the Accordion (Zippy)
(ns toryanderson.views.components.shared
"Shared components that may be used on multiple views"
(:require [reagent.core :as r]
[goog.dom :as dom]
[goog.string :as gstr])
(:import goog.ui.AnimatedZippy))
(defn accordion [{:keys [header-text content-body]}]
(let [header-id (gstr/createUniqueString)
content-id (gstr/createUniqueString)]
(r/create-class
{:display-name "zippy"
:reagent-render (fn [id] [:div.zippy-container
[:div {:id (str "wrap-" header-id)}
[:h1.title.is-5 {:id header-id} header-text]
[:div{:id content-id} content-body]]])
:component-did-mount #(AnimatedZippy. (dom/$ header-id)
(dom/$ content-id))})))
Styling the Accordion
(def accordions
"Styles for the accordions "
[:div.zippy-container
[:.goog-zippy-header {:margin-bottom 0}
[:&:hover {:background "#Add8e6"
:cursor :pointer}]
[:&:after {:margin-left (em 1)
:text-decoration :none} ]
[:&.goog-zippy-collapsed:after {:content "\"↓\""}]
[:&.goog-zippy-expanded:after {:content "\"↑\""}]]
[:.goog-zippy-content {:transition-property :all
:transition-duration "0.5s"
:transition-timing-function :ease
:transition-delay "0.5s"}]])
Resources
- Example: https://toryanderson.com/cv/
- Google Closure: https://google.github.io/closure-library/api/goog.ui.AnimatedZippy.html
