How to toggle class on a dom element using clojurescript or om-next

Question

I'm new to clojurescript and I got a task of creating a filter with toggling list items requirement on click of a plus icon. I have written css to hide when the class is inactive and show when it's active. I just want to know the correct syntax how to toggle the class on click using clojurescript or om-next.

Or is there any way to toggle (empty / fill) the list array on click of sibling / other element (h3).

I have tried something like this.

[:h3 (:name aggregation) {:on-click #(swap! :className "dInline" "dNone")}]

This is the actual code.

(defn render-aggregation
    [{navigation-dimension :field :as aggregation} toggle-expanded rendered-filters]
        (let [show-expanded? (> (count (:values aggregation)) 8)]
            [:li {:key (str "k-" navigation-dimension)}
                 [:h3 (:name aggregation)]
                     (cond-> (into [:ul.list-unstyled] rendered-filters)
                         show-expanded?
                         (conj [:li
                             [:button.btn.btn-default.btn-xs {:on-click (toggle-expanded aggregation)}
                                 (if (:ui/expanded? aggregation) "show fewer" "show more")]]))]))

Actual result is h3 element should change it's class to "dNone" on click

Answer 1

I can think of two solutions tapping into vanilla JS:

1. You may find this answer helpful. It requires the element (your h3) to have an ID though.
2. If you cannot hav an ID you may want to make use of JavaScript's this keyword, which apparently is accessible from ClojureScript (see here)

I have successfully used method #1 in some of my exercise code, but I'm pretty new to ClojureScript and Web Development in general… please handle my answer with care.

Cheers

Oliver