oTree Forum >

Bootrstrap Collapsible not Working

#1 by avalos_luis


I hate to be this person but I added a very simple "one-line" implementation of a bootstrap collapsible.

<button type="button" class="btn btn-info" data-toggle="collapse" data-target="#content"> Click here to expand/collapse the instructions </button>
<div class="collapsible" id="content">
	<p>Paragraph to be collapsed</p>

To my surprise, it does not work! Bootstrap should be supposedly pre-loaded into otree but for some mysterious reason, it just does not work at all.

Any pointer as to how to make it work would be of great help.


#2 by Chris_oTree

Are you sure that code works outside of oTree?

#3 by avalos_luis

Hi Chris,

I had a few typos. I made a working copy on jsfiddle. <link: https://jsfiddle.net/deprecor/3w5bacrs/1/ >

What became apparent is that the <script> tags where bootstrap is "initialized" (or whatever is called) were missing.

I placed them at the beginning of my code but now all the format is messed up. Where am I supposed to place them?

I am sorry, but there was no indication about doing this in the documentation.

P.S. I also tried placing it in {% block global_scripts  %} at the global page level but it's even worse. It messes up with the functionality that's based on formatting (hovering, clicking and other stuff). Not a solution.

Write a reply

Set forum username