Please help us help you and fill where relevant:
Your LimeSurvey version: LimeSurvey Cloud Version 6.15.10
Own server or LimeSurvey hosting: Cloud
Survey theme/template: Fruity 23
==================
I'm trying to add a collapsible element as suggested in the tutorial
www.mafosurvey.de/lime/Tutorial_Gimmicks.pdf
Apparently this is supposed to be done with bootstrap (
getbootstrap.com/docs/3.4/javascript/#collapse
)
I've been trying three things that don't seem to work properly.
Code:
<p><button aria-controls="collapseExample" aria-expanded="false" class="btn btn-primary" data-bs-target="#collapseExample" data-bs-toggle="collapse" type="button">Informationen zu den Paragraphen</button></p>
<div class="collapse" id="collapseExample">
blablablabla
</div>
Just adding a button with a data-bs-target doesn't do anything. The collapsible text remains hidden. Regardless of button clicks.
So I've been trying to manually activate it like this:
Code:
<p><button aria-controls="collapseExample" aria-expanded="false" class="btn btn-primary" data-bs-target="#collapseExample" data-bs-toggle="collapse" type="button">Informationen zu den Paragraphen</button></p>
<div class="collapse" id="collapseExample">
blablablabla
</div>
<script type="text/javascript" charset="utf-8"> $(document).on('ready pjax:complete',function() { $('.collapse').collapse(); });</script>
In this case the collapsible text is always displayed and the button click also doesn't seem to do anything.
As another option I've been trying to load bootstrap directly into the html:
Code:
<p><button aria-controls="collapseExample" aria-expanded="false" class="btn btn-primary" data-bs-target="#collapseExample" data-bs-toggle="collapse" type="button">Informationen zu den Paragraphen</button></p>
<div class="collapse" id="collapseExample">
blablablabla
</div>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
This does make the button open the collapsible, but it immediately collapses again (this is somehow bugged, I assume because LimeSurvey is already using some other bootstrap version in the background).
I suspect I'm doing something wrong with the activation (second option), but I'm not sure what. I hope you can help me.
