# Accordions included with Clojurescript

**URL:** https://clojureverse.org/t/accordions-included-with-clojurescript/6582
**Category:** Showcase
**Tags:** clojurescript
**Created:** [September 21, 2020, 7:46pm UTC](https://clojureverse.org/t/accordions-included-with-clojurescript/6582 "2020-09-21T19:46:54Z")
**Posts on this page:** 4
**Page:** 1

<div class="post-metadata">

### Author: ![Webdev\_Tory](https://clojureverse.org/user_avatar/clojureverse.org/webdev_tory/32/3781_2.png) [@Webdev\_Tory](https://clojureverse.org/u/Webdev_Tory)
#### Post date: [September 21, 2020, 7:46pm UTC](https://clojureverse.org/t/accordions-included-with-clojurescript/6582/1 "2020-09-21T19:46:54Z")

</div>

> **[Accordions out of the box with Clojurescript and Closure | Tech.ToryAnderson.com](https://tech.toryanderson.com/2020/09/13/accordions-out-of-the-box-with-clojurescript-and-closure/)**
>
> 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...

Google closure is a treasure-trove of little-known features that are all included with Clojurescript by nature of its using Closure. Never bother with an accordion plugin again.

---

<div class="post-metadata">

### Author: ![Kah0ona](https://clojureverse.org/user_avatar/clojureverse.org/kah0ona/32/3056_2.png) [@Kah0ona](https://clojureverse.org/u/Kah0ona)
#### Post date: [September 23, 2020, 12:54pm UTC](https://clojureverse.org/t/accordions-included-with-clojurescript/6582/2 "2020-09-23T12:54:04Z")

</div>

🙂

With reagent and like two-three lines of CSS3 it’s usually so simple for me that I don’t bother using such a native class for it.

Just toggle a class on a container div using a reagent atom for storing state of a section. Use css to animate it downwards and upwards.

having said this: will check out this treasure trove 'cause why not 🙂

---

<div class="post-metadata">

### Author: ![Webdev\_Tory](https://clojureverse.org/user_avatar/clojureverse.org/webdev_tory/32/3781_2.png) [@Webdev\_Tory](https://clojureverse.org/u/Webdev_Tory)
#### Post date: [September 23, 2020, 9:39pm UTC](https://clojureverse.org/t/accordions-included-with-clojurescript/6582/3 "2020-09-23T21:39:32Z")

</div>

True – I’ve done that too with an easy Reagent function. I’ve found the writing of those css lines to be annoying, though. Plus, the Google Closure method has support for things like “only one is allowed to be open at once,” plus any other toggle or on-expand logic. Closure will also provide me with things I hadn’t thought of, like the ARIA role. Check it out:

[https://google.github.io/closure-library/source/closure/goog/demos/zippy.html](https://google.github.io/closure-library/source/closure/goog/demos/zippy.html)

And the docs: [https://google.github.io/closure-library/api/goog.ui.AnimatedZippy.html](https://google.github.io/closure-library/api/goog.ui.AnimatedZippy.html)

---

<div class="post-metadata">

### Author: ![system](https://clojureverse.org/uploads/default/original/2X/5/51079bf9e4b7d9466242c06cf1e43b9f8bd6da14.png) [@system](https://clojureverse.org/u/system)
#### Post date: [March 25, 2021, 9:39am UTC](https://clojureverse.org/t/accordions-included-with-clojurescript/6582/4 "2021-03-25T09:39:36Z")

</div>

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.
