How to hide/show a table in ClojureScript

Question

I would like to show/hide a table when a font-awesome chevron button is clicked.

The following code comes from http://jsfiddle.net/z0y0hp8o/6/. I would like to do the same thing, but in clojurescript using java interop.

(document).on('click', '.panel-heading span.clickable', function(e){
    var $this = $(this);
    if(!$this.hasClass('panel-collapsed')) {
        $this.parents('.panel').find('.specialCollapse').slideUp();
        $this.addClass('panel-collapsed');
        $this.find('i').removeClass('glyphicon-chevron-up').addClass('glyphicon-chevron-down');
    } else {
        $this.parents('.panel').find('.specialCollapse').slideDown();
        $this.removeClass('panel-collapsed');
        $this.find('i').removeClass('glyphicon-chevron-down').addClass('glyphicon-chevron-up');
    }                                                                })

Here is my draft attempt in clojurescript.

(if (-> e -target -value
 (.getElementsByClassName js/document "panel-collapsed"))
  (do
    (.slideUp js/document
              (.find js/document ".specialCollapse"
                     (.parentElements js/document ".panel")))
    (.addClass "panel-collapsed")
    (.addClass "fas fa-chevron-down"
               (.removeClass "fas fa-chevron-up"
                             (.find "i"))))
  (do
    (.slideDown js/document
              (.find js/document ".specialCollapse"
                     (.parentElements js/document ".panel")))
    (.removeClass "panel-collapsed")
    (.addClass "fas fa-chevron-up"
               (.removeClass "fas fa-chevron-down"
                             (.find "i")))))

Answer 1

Found something that worked for me. I already had Bulma installed in my project, and was able to utilize a Bulma dropdown feature, with the following function from derHowie.

(defn toggle-class [id toggled-class]
 (let [el-classList (.-classList (.getElementById js/document id))]
   (if (.contains el-classList toggled-class)
     (.remove el-classList toggled-class)
     (.add el-classList toggled-class))))

implemented like

     [:div {:class "dropdown-trigger"}
      [:button {:class "button" :aria-haspopup "true" :aria-controls "drop-down-menu"
                :on-click #(toggle-class "table-dropdown" "is-active")}
       [:span "Table"]
       [:span {:class "icon is-small"}
        [:i {:class "fas fa-angle-down" :aria-hidden "true"}]]]]
     [:div {:class "dropdown-menu" :id "dropdown-menu" :role "menu"}
      [:div.dropdown-content
       [:div {:class "dropdown-item"}
        [table-to-be-displayed]]]]]

Pretty much, you can call the function toggle-class and send it the id of the element that you wish to modify, and the "is-active" class, and if that class is already applied to an element, it toggles it off, and then back on again. @Dennis provided a nice way to toggle the chevron up/down icon as well.