Bootstrap show/hide operations do nothing in Phoenix app

As documented at the bootstrap website, the actions that require javascript are not auto-included and you need to call them yourself. I.E., you could add something like this to your app.js for your specific example:

import $ from "jquery"

// Some bootstrap things need this, not most thankfully, keep disabled unless required, this one might require it?
// global.jQuery = require("jquery")

// Make sure you included bootstrap js in your npm and brunch config files or this will not work
global.bootstrap = require("bootstrap")

// Do the stuff to the existing html at page load time:
$(document).ready(() => {
  // This is optional if you want to do it on 'something other than default'
  $('[data-toggle="collapse"]').collapse()
}

Or something like that (I don’t use collapse, just dropdown and tooltip, and I’m fazing those out for other solutions over time).

I.E. Need to include bootstrap’s javascript. :slight_smile:

2 Likes