Mithril Toggle Detail

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

CoffeeScript

verticalSlide = (e) ->
  el = e.target
  con = el.querySelector(".detail")
  active = el.classList.contains('active')
  el.classList.toggle('active')
  Velocity(con, (if active then 'slideUp' else 'slideDown'), 
    {duration : 600}
  )
    
DetailList = 
   controller: (props) ->
     showDetail =   m.prop(props.data.map (i) -> false)
     setColor = (i) -> 
       if (showDetail().indexOf(true) is -1 or showDetail()[i])
         'black' 
       else
         'gray'
     toggleDetail = (i) -> (e) ->
        verticalSlide(e)
        #showDetail()[i] = !showDetail()[i]
     return {
       setColor: setColor
       showDetail: showDetail
       toggleDetail: toggleDetail
     }
   view: (c, props) ->
     m 'ul', props.data.map (d, i) ->
       m 'li', {
            onclick: c.toggleDetail(i)
            style: {color: c.setColor(i)}
          }, [
           d.summary, m('br'), m('div.detail', {style: 
             {display: 'none'} 
           }, d.detail)       
          ]

DetailList2 = 
   controller: (props) ->
     showDetail =   m.prop(props.data.map (i) -> false)
     setColor = (i) -> 
       if (showDetail().indexOf(true) is -1 or showDetail()[i])
         'black' 
       else
         'gray'
     toggleDetail = (i) -> (e) ->
        verticalSlide(e)
        #showDetail()[i] = !showDetail()[i]
     return {
       setColor: setColor
       showDetail: showDetail
       toggleDetail: toggleDetail
     }
   view: (c, props) ->
     m 'div.list-group', props.data.map (d, i) ->
       m 'a[href="#"].list-group-item', {
            onclick: c.toggleDetail(i)
            style: {color: c.setColor(i)}
          }, [
           d.summary, m('br'), m('div.detail', {style: 
             {display: 'none'} 
           }, d.detail)       
          ]
       
 
data = [1, 2, 3, 4, 5].map (i) ->
  summary: "Item #{i}", detail: "Detail #{i}"
    
myList = m.component(DetailList2, {data: data})

m.mount(document.body, myList)