Welcome to Foundation

Example from flippant repo

In this case the back content is defined in javascript.

More generic example

In this more generic case the back content is contained in the html so that it may be populated easily using javascript tempalting. Then the back element from the html is assigned to a variable when the flippant js is called.

document.addEventListener('click', function(e) {
  if (e.target.classList.contains('flippant-open')) {
    e.preventDefault()
    var flipper = e.target.parentNode
    var card = e.target.parentNode.parentNode
   // var back_content = card.querySelector('p').innerText
    // var back_content = card.getElementById('back').innerHTML
    var myDiv = card.getElementsByTagName('div')
 
var back_content = myDiv[1].innerHTML

    var back


    if (e.target.classList.contains('card')) {
      back = flip(flipper, back_content)
    } else {
      back = flip(flipper, back_content, 'modal')
    }

    back.addEventListener('click', function(e) {
      if (e.target.classList.contains('flippant-close')) {

        back.close(back, 'close')
      }
    })

  }
})